Fixed. I ended up moving the event listener inside the upload-factory.

    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);
		  }	  
	  });
	}

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).

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

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);
		  }	  
	  });
	}

Yes, sure. Thanks for your response.

In the Vue file

<q-uploader
ref=“listUploader”
:url=“url”
:upload-factory=“uploadFile”
…

<script>
import client from “src/api/client”;

const uploadService = client.service(“uploads”);
// UPLOAD PROGRESS LISTENER, PROGRESS RECEIVED FROM FEATHERSJS (socketio)
uploadService.on(“uploadProgress”, eventData => {
debug("@uploadProgress ", eventData);
});

// UPLOAD FACTORY
methods: {
uploadFile(file, updateProgress) {
const fileSize = file.size;
// HERE NEED TO CALL updateProgress(PROGRESS)
…
}

How can we trigger updateProgress from outside the upload-factory.

Update progress listener is outside the upload-factory, so how can we call the updateprogress for the file.

Can anyone suggest a solution