2

I am using the following codes to upload files. File would be sent through superagent in blob format, convert it to dataURI when reaches server and save into AWS S3.

files.forEach((file) => {
  superagent.post('http://localhost:3030/uploads')
  .attach('file', file)
  .on('progress', e => {
    console.log('Percentage done: ', e);
  })
  .end((err, res) => {
    // console.log(err);
    console.log(res);
  });
});

File upload works but the progress bar is not populated correctly.

1

As per the screenshot, you can see that the ProgressEvent upload percentage ended very fast at 100%, due to both frontend and backend hosted in a same server.

The upload progress continued in the background but the direction became "download" instead of "upload" from 14:14:08 to 14:14:14 and completed with a response.

I could not calculate the progress based on "total - loaded" too, because during the "download" progress, the total is 0.

2

Tried replacing superagent with axios and hit the same problem.

files.forEach((file) => {
  const url = 'http://localhost:3030/uploads';
  const formData = new FormData();
  const config = {
    headers: {
      'content-type': 'multipart/form-data'
    },
    onUploadProgress: e => {
      console.log('Upload: ', e);
    },
    onDownloadProgress: e => {
      console.log('Download: ', e);
    }
  };
  formData.append('file', file);
  axios.post(url, formData, config)
    .then(res => console.log(res))
    .catch(err => console.log(err));
});

How could I build a progress bar out of it? Can I conclude that the "upload" is the process of uploading to the server, while "download" is the process of uploading to AWS?

Yen Sheng
  • 695
  • 1
  • 12
  • 28
  • You can't really measure it this way, perhaps try websockets, but before that read https://stackoverflow.com/a/48412965/2805357 it should clarify what happened here. – djra Jan 24 '18 at 00:27

2 Answers2

1

today I met this problem(so I'm writing in this topic...) Docs https://visionmedia.github.io/superagent/ clearly says, that

event is direction: "upload" or "download"

So IMHO you have to do something like:

        if(event.direction === "upload")
            console.log(e.direction,"is done",e.percent,"%")})

and it works so can setState() for progress bar here. It's very dummy, but well. https://visionmedia.github.io/superagent/docs/test.html also here they are using this. Does anyone has better idea for this?

Arogancky
  • 113
  • 2
  • 7
  • it kind of make sense to me, but I get only 100% for some reason – Dmitriy Mar 24 '20 at 14:36
  • hi, after almost 3 years? :D I have noticed post (not remember where - here or FB group) where JS dev said that there is no elegant way to make progress bar so you can try to make your own wrapper. I'm not using JS anymore, sorry! But of course, you can provide code sample here – Arogancky Mar 25 '20 at 15:05
  • I've made some more research, and it seems that upload progress is working only in node, and not in browser. – Dmitriy Mar 27 '20 at 10:07
0

I don't think there's an error. That's how it's actually built, remember after sending a request to a server there's supposed to be a response, so that's where that download direction is coming from (as in downloading the data from the server as response data).

Libby Lebyane
  • 167
  • 2
  • 14