Q-uploader with factory function

bruno.ronchetti

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}`))
      }
    },

metalsadman

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

bruno.ronchetti

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()
            })
        }
      })
    },

bruno.ronchetti

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.

devmime

It is a long time ago but what you can do is to resolve() instead of resolve(files). This works for me.

LIANG FENG

@devmime , if I do like this, there is an error saying: TypeError: Cannot read property ‘url’ of undefined

pazarbasifatih

I’m having the same issue with @LIANG-FENG and @bruno-ronchetti
It uploads perfectly to Firebase. But I don’t have a url.
I tried moving from async await syntax to Promise syntax. It didn’t work.
I tried removing all the events from the quploader, except for the @factory-failed event. It didn’t work.
It gives error, but the thing works.

No More Posting New Topics!

Q-uploader with factory function