Uncaught TypeError: callback is not a function on Vuejs

Question

I try show a preview of image using Reader class and Vuejs, but when use el event change of input type file, have the next error: Uncaught TypeError: callback is not a function

<b-form-file
      ref="refInputEl"
      v-model="profileFile"
      accept=".jpg, .png, .gif"
      :hidden="true"
      plain
      @change="onFileChange"
      @input="inputImageRenderer"
/>

onFileChange(e) {
  const file = e.target.files
  if (file && file[0]) {
    const reader = new FileReader()
    // eslint-disable-next-line func-names
    reader.onload = function (event) {
      console.log(event.target.result)
      this.profilePhoto = event.target.result
    }
    reader.readAsDataURL(file[0])
  }
},

Answer 1

VueJs error 'callback is not a function', in my experience, typically means that something you're invoking is expecting a callback that isn't present or isn't returning properly. Check for a missing callback.

Take a look at this example from the VueJS forums wherein a user provided a Promise example for a similar question: https://forum.vuejs.org/t/vuex-store-callback-is-not-a-function/104136/3

You might try changing your onFileChange event handler into a promise and break down each step, console logging to check that FileReader has yet it needs, etc.