Quasar: QUploader - Failed upload

[apmcodes]

Software version

Backend FEATHERSJS
Frontend Quasar with FEATHERSJS WEBSOCKET CLIENT (No REST Client)

Operating System Linux(4.18.0-11-generic) - linux/x64
NodeJs 10.13.0
NPM 6.4.1
yarn Not installed
quasar-cli 0.17.22
vue-cli 2.9.6
cordova Not installed
quasar-cli 0.17.22 (Quasar Framework CLI)
quasar-framework 0.17.18 Any other software related to your bug:

Code

methods: {
    uploadFile(file, updateProgress) {
      return this.$store
        .dispatch("uploads/create", {
          file: file,
          fileName: file.name,
          contentType: file.type
        })
        .then(response => {
          updateProgress(1);
          debug("response ", response);
        })
        .catch(err => {
          debug("err", err.message);
        });
    },
  }

What did you get as the error?

The progress is red in color and stuck at 99% even AFTER promise is resolved and @uploaded event is never triggered (even if updateProgress is set to 1).

For some strange reason, the received promise resolve value is _undefined_ (even though backend is resolving with a JSON data)

1) Does this have anything to do with feathers socket client, as there is no http (rest client) involved?
2) In the doc it says, upload-factory should return a promise that resolves with a FILE. Whats this file is? Our promise resolve with some JSON data.

Console log (captured Vue Events)

Files added [File(145)]
Upload started
response  undefined
Upload finished

What were you expecting?

Upload finish with 100%

What steps did you take, to get the error?

Issue looks similar to #2829 but not able to figure it out.
Have spend 2 days on file upload with QUploader and really need some assistance to go past this. Thanks

[apmcodes]

[apmcodes]

Does this have anything to do with feathers socket client, as there is no http (rest client) involved?

As per #2090 QUploader is transport agnostic

[apmcodes]

Can someone guide me on why the below would result in failed upload. _This is driving me crazy ..._

METHOD

    uploadFile(file, updateProgress) {
      return new Promise((resolve, reject) => {
        resolve("Hi");
      });
    }

QUPLOADER

    <q-uploader
      :url="url"
      :upload-factory="uploadFile"
      :send-raw="true"
      :headers="{ 'content-type': 'application/x-www-form-urlencoded' }"
      :no-content-type="true"
      @add="uploadFileAdded"
      @start="uploadStarted"
      @finish="uploadFinished"
      @uploaded="uploadedFile"
      @fail="uploadFailed"
      color="orange"
      text-color="black"
      auto-expand
      extensions=".csv"
      inverted-light
      float-label="Upload List"
      :multiple="false"
      :hide-upload-button="false"
      :hide-upload-progress="false"
      :clearable="true"
    />

Console of QUploader events

Files added [File(145)]
Upload started
Failed file  File(145) {__doneUploading: false, __failed: true, __uploaded: 0, __progress: 0, __size: "145.0 B", …}
Upload finished

Anyone please take few minutes and answer ...

[apmcodes]

Finally solved this simple issue due to confusion that bothered me for the past 3 days, was on the verge of quiting on Quasar.

The Upload factory needs to return the UPLOADED FILE - The misunderstood part in the docs (which simply said resolves WITH a file). An example could have been better. Though quasar has a wonderful docs. Hope the below help someone save time.

    uploadFile(file, updateProgress) {
      return new Promise((resolve, reject) => {
        resolve(file);
      });
    }

I'm really thankful to Quasar developers for this awesome framework .

[rstoenescu]

Hi,

Glad you figured it out.

But I don't really understand this part: "was on the verge of quiting on Quasar [because can't use QUploader]". I mean, if you don't like one component, then you can use whatever other similar components out there in the Vue ecosystem. How many other frameworks have an uploader component anyway? :)

-Razvan

[metalsadman]

Could of make his own component too, I made one to upload it with the rest of my formdata. for profile pic and signature that will use a camera or file picker or a signature pad then convert those images to base64. I did tried to solve this issue but to no luck as well, glad the OP made it to work :).

[apmcodes]

I understand, thanks for the motivation.

[tvkit]

@apmcodes Good tip on resolving the uploaded File instance

@rstoenescu Perhaps the example upload-factory could also mention the File resolve requirement.

Upload-Factory

The property definition indicates the File instance requirement:

• _(v0.17+) Function defining a custom upload method which returns a Promise that resolves with a file. Check section below._

Perhaps the example could also mention the required File instance:

• _we need to return a Promise
  (resolves specifying the file instance when upload is done, rejects when there's an error)_

<template>
  <q-uploader
    url=""
    :upload-factory="uploadFile"
  />
</template>

<script>
export default {
  methods: {
    uploadFile (file, updateProgress) {
      // "file" is an Object containing file's props, including content

      // for updating progress (as 0-1 floating number), we need to call:
      // updateProgress (bytesTransferred / totalBytes)

      // we need to return a Promise
      // (resolves <<<specifying the file instance>>> when upload is done, rejects when there's an error)
    }
  }
}
</script>