1

Basically I have created a simple project where users can drag and drop to upload a file to server. Just to inform the user how long would it take to complete the process I need to show their upload speed. I found this question estimate users' upload speed without direct permission But It quite didn't suited my project.

So here is my code how i'm upload the file:

function upload(file){
    var xhr=new XMLHttpRequest();
    xhr.onreadystatechange = function() {

        if (xhr.readyState == XMLHttpRequest.DONE) {
               alert(xhr.responseText);
        }
    }

    xhr.upload.addEventListener('progress', function(e){
    $('.upgbar').show();
    $('.trkpb').css('width', (e.loaded/e.total*100)+"%");

    var loaded = e.loaded;
    var total = e.total;
    var progressValue = Math.round( ( e.loaded / e.total ) * 100 );

    var seconds_elapsed =   ( new Date().getTime() - started_at.getTime() )/1000; var bytes_per_second =  seconds_elapsed ? loaded / seconds_elapsed : 0 ;
    var Kbytes_per_second = bytes_per_second / 1000 ;
    var remaining_bytes =   total - loaded;
    var seconds = seconds_elapsed ? remaining_bytes / bytes_per_second : 'calculating' ;
    $('.time_re').text("Time Remaining: "+seconds.charAt(0));
    }, false);

    xhr.open('post','../uploadtostack',true);
    xhr.setRequestHeader('X-File-Name',file.name);
    xhr.setRequestHeader('x-File-Size',file.size);
    xhr.setRequestHeader('X-File-Type',file.type);
    xhr.send(file);
}

through xhr.upload.addEventListener I can estimate the time remaining and the amount of data uploaded But don't know to munipulate this to show me the upload speed. and If you Might why am I getting an error at line $('.time_re').text("Time Remaining: "+seconds.charAt(0));

TypeError: seconds.charAt is not a function[Learn More]

I would really appreciate if someone could tell me how to implement a speechecker in javascript || jquery. Regards

Community
  • 1
  • 1
mr jorden
  • 89
  • 2
  • 12
  • 1
    Look up file upload managers. You'd probably be better off reporting how much of the file *has* been uploaded versus how large the file actually is. – Mike Cluck Nov 21 '16 at 17:24
  • A user's connection speed to your server will fluctuate as there quite a few variables beyond just their internet connection. Off the top of my head there is: user's internet connection, your server's internet connection, current load on your webserver (if it is bogged down it won't process as quickly), user's CPU overhead on their computer, ..etc. What @Mike C proposed is more reliable and valuable to the end user. – Adrian Nov 21 '16 at 17:30
  • I think these Q&As give good insight into how it can be done: http://stackoverflow.com/questions/21027888/calculate-upload-speed and http://stackoverflow.com/questions/15472251/estimate-users-upload-speed-without-direct-permission — checking both successful and failed XHR. – rishat Nov 21 '16 at 17:35
  • @MikeC I don't think I am following you. Do you mean I should check the amount of bytes received on server and respond back the speed? – mr jorden Nov 21 '16 at 17:37
  • @mrjorden Pretty much. You'll need to setup some kind of polling or websocket connection. Many people have had this problem so there's a lot of information on it out there. – Mike Cluck Nov 21 '16 at 17:38
  • @MikeC I just updated my question, can you tell me would `loaded/total` help me to get upload speed and how? – mr jorden Nov 21 '16 at 18:38
  • @mrjorden That's just to display how much is left to upload. If you want speed, report how much has been uploaded and how long it took to upload that. `loaded / timeToProduceLoaded` gives you the upload rate. – Mike Cluck Nov 21 '16 at 21:09

1 Answers1

-2

You can try send a defined size file before and calculate the estimate time with this. Example: demo file.txt > size 10k 1 second another: filetoupload.txt > size 20k expected time 2 seconds