No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    QUploader "forEach of 'null'"

    Help
    2
    4
    390
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • S
      Sweetyy last edited by 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 !

      1 Reply Last reply Reply Quote 0
      • S
        Sweetyy last edited by

        Still no ideas ?

        1 Reply Last reply Reply Quote 0
        • metalsadman
          metalsadman last edited by

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

          1 Reply Last reply Reply Quote 0
          • S
            Sweetyy last edited by 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 …

            1 Reply Last reply Reply Quote 0
            • First post
              Last post