Q-uploader with factory function



  • I cannot get q-uploader to trigger the uploaded event after doing a factory-based upload.

    I have read on the forum that the promise-based factory function needs to return “the file” in order complete, but I do not understand what this file object needs to look like.

    I use stitch (the mongodb serverless backend) to upload the file to AWS S3 and the upload works just fine.

    But I fail to get the notification that the uplaod has been completed.

    Here is my code:

    html

      <q-uploader square flat bordered no-thumbnails
                v-if="document.ShowUploadDialog"
                ref="uploader"
                :multiple="false"
                :factory="uploadFile"
                @uploaded="uploaded"
                url="http://localhost:4444/upload"
                color="white"
                text-color="grey-5"
                style="margin-top:10px; margin-left: 340px; max-width: 250px"
              >
    

    script

        uploaded () {
          alert('uploaded')
        },
    
        uploadFile (files) {
          var myUploader = this.$refs.uploader[0]
          var file = files[0]
          var fileSrc
          var fileData
    
          var reader = new FileReader()
          reader.readAsDataURL(file)
          reader.onerror = err => console.error(`Failed to read file: ${err}`)
          reader.onload = function () {
            fileSrc = reader.result
            fileData = fileSrc.substr(fileSrc.indexOf(',') + 1)
            stitchClient.callFunction('uploadImageToS3', [fileData, 'elever-erp-document-store', file.name, file.type])
              .then(result => {
                alert('fatto')
                myUploader.removeFile(file)
                return reader /* what do I need to return? */
              })
              .catch(err => console.error(`Failed to upload file: ${err}`))
          }
        },
    


  • @bruno-ronchetti return your api call inside a promise and resolve(files) / reject(err) in your then / catch callbacks.



  • Thanks a lot @metalsadman I got it working now. This promise within a promise thing got me confused.

    Should anyone be interested in the future, this is what works for me:

    html

                v-if="document.ShowUploadDialog"
                ref="uploader"
                :multiple="false"
                :factory="uploadFile"
                @added="added"
                @finish="uploaded"
                @uploaded="uploaded"
                url="http://localhost:4444/upload"
                color="white"
                text-color="grey-5"
                style="margin-top:10px; margin-left: 340px; max-width: 250px"
              >
    

    script

        uploadFile (files) {
          return new Promise((resolve, reject) => {
            var myUploader = this.$refs.uploader[0]
            var file = files[0]
            var fileSrc
            var fileData
    
            var reader = new FileReader()
            reader.readAsDataURL(file)
            reader.onerror = err => console.error(`Failed to read file: ${err}`)
            reader.onload = function () {
              fileSrc = reader.result
              fileData = fileSrc.substr(fileSrc.indexOf(',') + 1)
              stitchClient.callFunction('uploadImageToS3', [fileData, 'elever-erp-document-store', file.name, file.type])
                .then(result => {
                  alert('fatto')
                  console.log(file)
                  myUploader.removeFile(file)
                  resolve(files)
                })
                .catch(err => {
                  console.error(`Failed to upload file: ${err}`)
                  reject()
                })
            }
          })
        },
    


  • One step further I have incurred in another problem.
    If I want my @uploaded event triggered, I need to resolve the promise with a “file” object. This seems to require an “url” parameter with the url actually returning a 200 code to trigger the @uploaded event.
    This seems to me to be pretty useless, since the actual upload was executed by the api (stitchclient.callfunction in my case).
    I have solved this with a workaround, ie pointing the url to a dummy server which returns the 200 code. But I wonder if this is the intended way to solve this. Maybe I have an edge case, but uploading through apis should not be that uncommon.


Log in to reply