Assigning converted `Base64` values in Javascript in Vuejs method

Question

I'm trying to retrieve file information from input field of type="file" in my Vuejs application. I'm having a render function which renders the input fields something like this and calls a function on input, code as below:

input: (event) => {
    var reader = new FileReader()
    reader.readAsDataURL(event.target.files[0])
    let baseFile = ''
    reader.onload = function () {
        baseFile = reader.result
        console.log(baseFile)
    };
    console.log(baseFile)
    const docs = {
        name: event.target.files[0].name,
        size: event.target.files[0].size,
        lastModifiedDate: event.target.files[0].lastModifiedDate,
        base64: baseFile
    }
    this.$emit('input', docs)
}

When I run this function console.log inside my reader.onload function gives me converted files but when I do console outside of it, the value is just an empty string. How I can I retrieve and assign to my const docs variable. Help me out with this. Thanks.

I guess you should assign var inside callback of reader.onload — wolendranh
– wolendranh, Commented Dec 27, 2018 at 12:59

Boussadjra Brahim · Accepted Answer · 2018-12-27 12:59:58Z

3

I recommend to put the rest of code inside the block of that function after changing it to an arrow function as follows :

input: (event) => {
  var reader = new FileReader()
  reader.readAsDataURL(event.target.files[0])
  let baseFile = ''
  reader.onload = () => {// <------ use arrow function
    baseFile = reader.result
    const docs = {
      name: event.target.files[0].name,
      size: event.target.files[0].size,
      lastModifiedDate: event.target.files[0].lastModifiedDate,
      base64: baseFile
    }
    this.$emit('input', docs)
  };


}

answered Dec 27, 2018 at 12:59

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Assigning converted `Base64` values in Javascript in Vuejs method

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related