0

I am using filestack client to upload images to S3 bucket. I want to show progress bar while uploading. When I upload any image of almost more than 1MB the progress bar progresses in desired way, means, progress bar moves from 0% to 100% very smoothly.

But when I try to upload any small file(image) of like some KBs the progress bar jumps directly from 0% to 100% in zero time.

In upload options I tried smallest value of 1 Milli Second for property progressInterval but not luck.

Here is my code:

    let uploadOptions = {
        progressInterval: 1,
        onProgress: (e) => {
            $('.thumbnail-container .thumbnail .progress-container .progress').css('width', e.totalPercent+'%');
            $('.thumbnail-container .thumbnail .progress-container p.percentage').html(e.totalPercent+'%');
        },
    }

    let storeOptions = {
        "access": "public",
        "path": temp_path+'/'+file.name+'.'+fextension
    }

    client.upload(file, uploadOptions, storeOptions)
    .then(res => {
        console.log(res);
    });

I want progress bar to move smoothly, from 0 to 100 in a linear way.

Khurram Ilyas
  • 117
  • 3
  • 19
  • 1
    Probably your file can be sent in just one packet The MTU (maximum transfer unit) for Ethernet, for example, is 1500 bytes. https://www.lifewire.com/definition-of-mtu-817948 – tomitheninja Jan 05 '19 at 15:33
  • Not sure, because it take almost 1 or 2 seconds to jump from 0 to 100. Means, as soon as I press upload button, the progress bar appears with zero percent. After almost 2 seconds it jumps to 100 percent. What I want is, in those 2 seconds progress bar should move linearly from 0 to 100. – Khurram Ilyas Jan 05 '19 at 15:37
  • Can you try slow down your network? Chrome-based browsers have a network-debugging tab, you can switch the online to slow 3G there. And also try console.log-ing the state every time it updates – tomitheninja Jan 05 '19 at 15:43

0 Answers0