QUploader "forEach of 'null'"

Sweetyy

Hello everyone !

Can you help me please with this error when i’m trying to upload manually an image with the QUploader component on Quasar 1.2.4 :

TypeError: Cannot read property 'forEach' of null
    at VueComponent.__uploadFiles (uploader-xhr-mixin.js?f259:227)
    at VueComponent.__runFactory (uploader-xhr-mixin.js?f259:89)
    at eval (uploader-xhr-mixin.js?f259:80)
    at Array.forEach (<anonymous>)
    at VueComponent.upload (uploader-xhr-mixin.js?f259:79)
    at VueComponent.uploadLogos (Elsettings.vue?3ae4:1336)
    at VueComponent.addElementImage (Elsettings.vue?3ae4:1317)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at VueComponent.invoker (vue.runtime.esm.js?2b0e:2179)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)

The strange thing is that i already used it in another view in the exact same way but this time i got this error … i just can’t find why …

Here is my QUploader :

<q-uploader
              field-name="media"
              accept=".png, .jpg"
              flat
              no-thumbnails
              :headers="headers"
              ref="elementImage"
              color="secondary"
              :url="uploadUrl + '/element/' + element.id + '/media'"
              hide-upload-btn
              @added="addElementImage"
              @uploaded="confirmUpload"
              @failed="errorUpload" />

With the manual upload method :

addElementImage (files) {
      this.$refs.elementImage.upload()
}

I tried with ‘auto-upload’ it’s the same error. Notice that the headers and URL are the same as the one that is working in another view but i think the uploader doesn’t detect any file to upload. That’s why i even tried to add it manually and then upload it :

addElementImage (files) {
      console.log(files)
      this.$refs.elementImage.addFiles(files)
      this.$refs.elementImage.upload()
}

The file is here but the upload is still generating this error

Thanks in advance for your help !

Sweetyy

Still no ideas ?

metalsadman

@Sweetyy tried updating to new version? post your quasar info and provide a codepen pls.

Sweetyy

Well i found the problem ! x)

My headers variable was set to headers: null by default and not to headers: [] in the data … Because of that, when i was trying to set this variable dynamically in the created function, it couldn’t push the properties in it …