QUploader "forEach of 'null'"



  • 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 !



  • Still no ideas ?



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



  • 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 …


Log in to reply