QUploader progress bar not updating realtime but at the end

[stuffy]

The progress bar do not update on updateProgress call (during upload) but completes from 0 to 100% at the end of promise resolve. updateProgress is triggered by socketio events received and can see console logs, but progress bar do not progress.

Even manually calling updateProgress(0.5) INITIALLY do not make the progress bar 50%.

    uploadFile(file, updateProgress) {
      // updateProgress(0.5);
      const applyProgress = eventData => {
         ... 
         updateProgress(progressPercent);
        }
      };
      uploadService.on("uploadProgress", applyProgress);
	  
      return new Promise((resolve, reject) => {
        this.$axios
          .post("/uploads", formData)
          .then(response => {
            uploadService.removeListener("uploadProgress");
            return resolve(file);
          })
          .catch(err => {
		  	...
			return reject(err);
		  }	  
	  });
	}

[metalsadman]

try not wrapping your api call in the promise callback.

[metalsadman]

@stuffy
so i’ve tested and it’s working fine, my setup was:

uploadFile (file, updateProgress) {
      const fd = new FormData()
      fd.append('file', file)
      return new Promise((resolve, reject) => {
        this.$axios.post(process.env.api + '/upload1',
          fd,
          {
            headers: { 'Content-Type': 'multipart/form-data' },
            onUploadProgress: (progressEvent) => {
              updateProgress(progressEvent.loaded / progressEvent.total)
            }
          })
          .then(res => {
            resolve(file)
          })
          .catch(err => reject(err))
      })
    }

what you are missing is handling the axios config specifically onUploadProgress, it is there where you should call the updateProgress.
from axios doc https://github.com/axios/axios.
// onUploadProgress allows handling of progress events for uploads
onUploadProgress: function (progressEvent) {
// Do whatever you want with the native progress event
},

also from quasar docs:
// for updating progress (as 0-1 floating number), we need to call:
// updateProgress (bytesTransferred / totalBytes)
https://quasar-framework.org/components/uploader.html#Upload-Factory

so what i did in the code above was to calculate the progress percentage and pass it as parameter on the updateProgress function so it will update its progress bar for each file (internally) each time the axios onUploadProgress event is called.
You’ll hardly notice changes from 0-100% specially if the file size isn’t really that big.

[stuffy]

Hmm thank you for taking time to look into this. Will work on this and get back to you

[stuffy]

Somehow, my code in the first post is working now. The progress is proceeding according to the bytesize value of uploadProgress event received from the backend. Had done some changes in the backend. Not sure what made it work now.

@metalsadman thank you very much once again for trying to help. Actually, i’m doing csv import so the progress is that of the import (streaming) and not just the file transfer. So the import progress is emitted by the backend (featherjs service).