VueJS hash files with CryptoJS

Question

I'm reaching out to you because I'm terribly stuck with a Vue project...

I'm experiencing a little issue when trying to move a jQuery project over to Vue. CryptoJS is working a charm and I can create hashes from strings.

However, I'm still struggling reading the actual file, as the nested functions are throwing errors. Specifically getting errors on the callbackRead function.

App.vue?234e:280 Uncaught TypeError: this.callbackRead is not a function
at FileReader.reader.onload (App.vue?234e:280)

Can you please give me some guidance on how to successfully translate the script to VUE JS? ( https://medium.com/@0xVaccaro/hashing-big-file-with-filereader-js-e0a5c898fc98 )

Thanks a lot in advance!!!

Here is what I got so far: https://codesandbox.io/s/vuejs-file-crypter-kjirp

Best regards, Mac

Answer 1

The error is coming from this section:

reader.onload = function(evt) {
    this.callbackRead(this, file, evt, callbackProgress, callbackFinal);
};

The problem is that this refers to the wrong object. Your onload handler is a different function from the surrounding code and whenever you enter a new function the value of this changes.

There are several possible solutions.

Aliasing this:

const that = this;

reader.onload = function(evt) {
    that.callbackRead(that, file, evt, callbackProgress, callbackFinal);
};

Binding this:

reader.onload = function(evt) {
    this.callbackRead(this, file, evt, callbackProgress, callbackFinal);
}.bind(this);

Using an arrow function, which won't alter the value of this:

reader.onload = evt => {
    this.callbackRead(this, file, evt, callbackProgress, callbackFinal);
};