I'm working on an uploader for angular-js that can give me progress updates. The code below works however on chrome, for files that are under around 3MB, one progress update fires before it starts sending, and the event data indicates that all the bytes are uploaded. It then takes some time (up to 30secs) before the file data is actually sent (and no further progress events will fire during the actual upload). If I use a larger file, I'll get two events or maybe three. On firefox, I'll get around 6 progress events for a 2MB file. Does anyone know if there's a way to adjust the granularity of these updates to fix this. To me, this function is basically useless (on chrome) since most documents aren't that big. Thanks.
send: function() {
var document = {
DocumentName: this.fsEntry.file.name
};
var formdata = new FormData();
formdata.append('file', this.fsEntry.file);
formdata.append('metadata', JSON.stringify(document));
this.xhr = new XMLHttpRequest();
this.xhr.addEventListener("loadstart", this.onLoadStart, false);
this.xhr.upload.addEventListener("progress", this.onProgress, false);
this.xhr.addEventListener("load", this.onComplete, false);
this.xhr.open("POST", this.fsEntry.uploadUri, true);
this.xhr.send(formdata);
}
this.onProgress = function(e) {
if (e.lengthComputable) {
console.log("progress: uploaded " + e.loaded + " of " + e.total);
}
}
Related
I will try to explain my problem very detailed.
NOTE-1: It is not an issue with small files or whatever. I'm testing it with large files, with slow upload speed network
throttling...etc
NOTE-2: The progress bar works perfectly in other browser (Tested in edge)
NOTE-3: This issue only occurs in CHROME browser
I'm currently working on a file Uploader by using XHR. Everything works good, files are upload ...etc
I made a progress bar which its working, but only the very first time. (Or when I do CTRL+SHIFT+R), which basically clears the cache. (I have even ticked clear cache in developer mode which is active during testing)
As I said, it works the very first time, however, when I refresh the page, the progress even is not fired. However, load event is fired (This event is only fired when the file is fully uploaded)
I tested the code and everything is working fine in Edge browser, I can refresh and progress event is fired correctly, however is not the same for Chrome.
I have read some articles about that content-length must exists in headers and be greater than zero, and it is.
This is my script (The upload part)
let uploadFile = () => {
//... Some other stuffs
console.log("Upload started")
let xhr = new XMLHttpRequest();
let formData = new FormData();
formData.append('file', file);
xhr.open("POST", "uploaderServerside.php");
xhr.upload.addEventListener('progress', function(evt){
console.log("Uploading: " + (Math.round(evt.loaded / evt.total * 100)) + "%");
}, false);
xhr.addEventListener("load", () => {
console.log("Upload finished")
});
xhr.send(formData);
}
I hope you can bring me a hand with this issue, thanks for reading and best regards.
Sound like chrome has some aggressive caching, you can check the network tab to see if the request is loaded from cache, you will see (disk cache) under the size column.
To avoid the cache you can use a cache buster
xhr.open("POST", "uploaderServerside.php?_="+(new Date()).getTime());
Or you can set Headers on uploaderServerside.php to force the browser to not cache the request like
Cache-Control: no-store
Expires: 0
I am trying to monitor the progress of my files upload, but the "progress" event is never fired on chrome, firefox and opera. It works perfectly on Safari however.
I use the package meteor-slingshot to manipulate my files. Here is the code that the package use in order to send the files :
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", function (event) {
if (event.lengthComputable) {
loaded.set(event.loaded);
total.set(event.total);
}
}, false);
xhr.open("POST", self.instructions.upload, true);
_.each(self.instructions.headers, function (value, key) {
xhr.setRequestHeader(key, value);
});
xhr.send(buildFormData());
Do you have an idea of what is the problem? Is the problem coming directly from those browsers ?
I am uploading files to server using Dojo 1.10. For the upload I use module dojo/request/xhr and trying to display progress in percents. I am confused that the progress callback is fired just one and only at the end of the transfer. The file is transferred successfully. See fragment of my code:
function uploadFile(){
require([
'dojo/dom',
'dojo/request/xhr'
], function(dom, xhr) {
//... some unimportant code here
// Upload file now:
xhr(targetURL, {
handleAs: 'text',
method: 'POST',
headers: {'X-CSRF-Token': getAuthToken(), 'accept-charset': 'UTF-8'},
data: formData
}).then(function(data){
// Success => refresh file list
refreshDocList();
}, function(err){
// Failed
uploadFailed(err);
}, function(evt){
// Progress of upload
console.log(evt);
dom.byId('progress').innerHTML = 'Done ' + (evt.loaded * 100 / evt.total) + '%';
});
});
}
I tested it in FireFox (45.0.1, Windows 8.1), Chrome (49.0.2623.110 m, Windows 8.1), MSIE (11.0.9600.18231, Windows 8.1), FireFox (44.0, Ubuntu 15.04), Chrome (48.0.2564.116, Ubuntu 15.04). In none of the mentioned browsers the progress callback is called as expected. Any tip how to solve my problem?
It doesn't look like there's any way of doing this in dojo/request. You'll need to use XMLHttpRequest directly.
The reason is that progress events are only emitted for the download portion. For the upload portion, you need to use the upload member of the XHR object as follows:
var oReq = new XMLHttpRequest();
oReq.upload.addEventListener("progress", updateProgress);
oReq.upload.addEventListener("load", transferComplete);
oReq.upload.addEventListener("error", transferFailed);
oReq.upload.addEventListener("abort", transferCanceled);
oReq.open();
Looking at the dojo/request/xhr source code, I don't think there's any simple way of getting dojo/request/xhr to expose the XHR object (and by extension the upload member). Hence you'll probably need to use XMLHttpRequest directly.
For more, see https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
Further to #yassam's answer, it seems there is a way to access the xhr object that is behind the scenes of dojo/request, but for some reason I can only get this to work when I pass true as the third argument to request().. this is the returnDeferred argument, and if you check dojo/request/xhr code it has this final line:
return returnDeferred ? dfd : dfd.promise;
So, you can do this:
var promise = request('some_url', { .. options .. }, true); // <-- note 'true'!
if (promise.response.xhr) {
promise.response.xhr.upload.addEventListener("progress", function (e) {
console.log('xhr progress: ' + e.loaded + ' of ' + e.total + ': ', e);
});
}
One thing I don't understand right now, passing false for returnDeferred (or omitting it) should return dfd instead of dfd.promise from request(), in which case you should be able to use dfd.promise in exactly the same way, but I find this doesn't exist.
I have searched relentlessly but just can't figure this one out. Why will this XHR connection work perfectly fine in Firefox but breaks in Chrome? I'm using this in conjunction with AngularJS, by the way.
$scope.upload = function(project, file) {
var formData = new FormData(); //Not really sure why we have to use FormData(). Oh yeah, browsers suck.
formData.append('', file.file); //The real file object is stored in this file container
file.xhr = new XMLHttpRequest();
file.xhr.open('PUT', '/api/projects/'+project._id+'/files', true);
//Progress event listener
file.xhr.upload.onprogress = function(event) {
if(event.lengthComputable) {
file.uploadPercent = Math.round(event.loaded / event.total * 100);
}
};
//Upload complete listener
file.xhr.upload.onload = function(event) {
file.uploaded = true;
};
//Every time the status changes
file.xhr.onreadystatechange = function(event) {
if(event.target.readyState == 4) {
//The file has been added, so tag the ID onto the file object
console.log(event.target.responseText);
file._id = JSON.parse(event.target.responseText)._id;
} else {
return;
}
};
file.xhr.send(formData);
};
In Firefox, the file is sent just fine to my server, and the responseText is returned exactly like I'd expect. However, in Chrome, I get this error: Error: INVALID_STATE_ERR: DOM Exception 11
Error: An attempt was made to use an object that is not, or is no longer, usable., which would be more helpful if it told me exactly what object was attempted to be used. I've read here that I should try to set async to false and use onreadystatechange, but I'm not sure how that helps, since I'm already using onreadystatechange.
Bug from 2009: XMLHttpRequest doesn't work while submitting a form - https://bugs.webkit.org/show_bug.cgi?id=23933
Is it possible to get the progress of an XMLHttpRequest (bytes uploaded, bytes downloaded)?
This would be useful to show a progress bar when the user is uploading a large file. The standard API doesn't seem to support it, but maybe there's some non-standard extension in any of the browsers out there? It seems like a pretty obvious feature to have after all, since the client knows how many bytes were uploaded/downloaded.
note: I'm aware of the "poll the server for progress" alternative (it's what I'm doing right now). the main problem with this (other than the complicated server-side code) is that typically, while uploading a big file, the user's connection is completely hosed, because most ISPs offer poor upstream. So making extra requests is not as responsive as I'd hoped. I was hoping there'd be a way (maybe non-standard) to get this information, which the browser has at all times.
For the bytes uploaded it is quite easy. Just monitor the xhr.upload.onprogress event. The browser knows the size of the files it has to upload and the size of the uploaded data, so it can provide the progress info.
For the bytes downloaded (when getting the info with xhr.responseText), it is a little bit more difficult, because the browser doesn't know how many bytes will be sent in the server request. The only thing that the browser knows in this case is the size of the bytes it is receiving.
There is a solution for this, it's sufficient to set a Content-Length header on the server script, in order to get the total size of the bytes the browser is going to receive.
For more go to https://developer.mozilla.org/en/Using_XMLHttpRequest .
Example:
My server script reads a zip file (it takes 5 seconds):
$filesize=filesize('test.zip');
header("Content-Length: " . $filesize); // set header length
// if the headers is not set then the evt.loaded will be 0
readfile('test.zip');
exit 0;
Now I can monitor the download process of the server script, because I know it's total length:
function updateProgress(evt)
{
if (evt.lengthComputable)
{ // evt.loaded the bytes the browser received
// evt.total the total bytes set by the header
// jQuery UI progress bar to show the progress on screen
var percentComplete = (evt.loaded / evt.total) * 100;
$('#progressbar').progressbar( "option", "value", percentComplete );
}
}
function sendreq(evt)
{
var req = new XMLHttpRequest();
$('#progressbar').progressbar();
req.onprogress = updateProgress;
req.open('GET', 'test.php', true);
req.onreadystatechange = function (aEvt) {
if (req.readyState == 4)
{
//run any callback here
}
};
req.send();
}
Firefox supports XHR download progress events.
EDIT 2021-07-08 10:30 PDT
The above link is dead. Doing a search on the Mozilla WebDev site turned up the following link:
https://developer.mozilla.org/en-US/docs/Web/API/ProgressEvent
It describes how to use the progress event with XMLHttpRequest and provides an example. I've included the example below:
var progressBar = document.getElementById("p"),
client = new XMLHttpRequest()
client.open("GET", "magical-unicorns")
client.onprogress = function(pe) {
if(pe.lengthComputable) {
progressBar.max = pe.total
progressBar.value = pe.loaded
}
}
client.onloadend = function(pe) {
progressBar.value = pe.loaded
}
client.send()
I also found this link as well which is what I think the original link pointed to.
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/progress_event
One of the most promising approaches seems to be opening a second communication channel back to the server to ask it how much of the transfer has been completed.
For the total uploaded there doesn't seem to be a way to handle that, but there's something similar to what you want for download. Once readyState is 3, you can periodically query responseText to get all the content downloaded so far as a String (this doesn't work in IE), up until all of it is available at which point it will transition to readyState 4. The total bytes downloaded at any given time will be equal to the total bytes in the string stored in responseText.
For a all or nothing approach to the upload question, since you have to pass a string for upload (and it's possible to determine the total bytes of that) the total bytes sent for readyState 0 and 1 will be 0, and the total for readyState 2 will be the total bytes in the string you passed in. The total bytes both sent and received in readyState 3 and 4 will be the sum of the bytes in the original string plus the total bytes in responseText.
<!DOCTYPE html>
<html>
<body>
<p id="demo">result</p>
<button type="button" onclick="get_post_ajax();">Change Content</button>
<script type="text/javascript">
function update_progress(e)
{
if (e.lengthComputable)
{
var percentage = Math.round((e.loaded/e.total)*100);
console.log("percent " + percentage + '%' );
}
else
{
console.log("Unable to compute progress information since the total size is unknown");
}
}
function transfer_complete(e){console.log("The transfer is complete.");}
function transfer_failed(e){console.log("An error occurred while transferring the file.");}
function transfer_canceled(e){console.log("The transfer has been canceled by the user.");}
function get_post_ajax()
{
var xhttp;
if (window.XMLHttpRequest){xhttp = new XMLHttpRequest();}//code for modern browsers}
else{xhttp = new ActiveXObject("Microsoft.XMLHTTP");}// code for IE6, IE5
xhttp.onprogress = update_progress;
xhttp.addEventListener("load", transfer_complete, false);
xhttp.addEventListener("error", transfer_failed, false);
xhttp.addEventListener("abort", transfer_canceled, false);
xhttp.onreadystatechange = function()
{
if (xhttp.readyState == 4 && xhttp.status == 200)
{
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "http://it-tu.com/ajax_test.php", true);
xhttp.send();
}
</script>
</body>
</html>
If you have access to your apache install and trust third-party code, you can use the apache upload progress module (if you use apache; there's also a nginx upload progress module).
Otherwise, you'd have to write a script that you can hit out of band to request the status of the file (checking the filesize of the tmp file for instance).
There's some work going on in firefox 3 I believe to add upload progress support to the browser, but that's not going to get into all the browsers and be widely adopted for a while (more's the pity).
The only way to do that with pure javascript is to implement some kind of polling mechanism.
You will need to send ajax requests at fixed intervals (each 5 seconds for example) to get the number of bytes received by the server.
A more efficient way would be to use flash. The flex component FileReference dispatchs periodically a 'progress' event holding the number of bytes already uploaded.
If you need to stick with javascript, bridges are available between actionscript and javascript.
The good news is that this work has been already done for you :)
swfupload
This library allows to register a javascript handler on the flash progress event.
This solution has the hudge advantage of not requiring aditionnal resources on the server side.