I use AJAX upload for my site, and Javascript is the choice (not jQuery).
But What I have come up with does not work with Firefox. Here is the XMLHttpRequest code block:
var xhr = new XMLHttpRequest();
xhr.open("POST", "upload.php");
xhr.onprogress = function(event){
if(event.lengthComputable)
{
console.log(event.loaded);
}
};
xhr.setRequestHeader("Cache-Control", "no-cache");
xhr.send(formData);
And pay attention to xhr.onprogress event.
Alternatively, I also use the following code for progress:
xhr.upload.addEventListener("progress", function(){
// do something
}, false);
But:
For the first solution which is xhr.onprogress it has a problem:
It just shows the amount of event.loaded after the upload has been finished. This amount is the same as the file size since the upload has fully loaded the file.
It works in both FF and chrome, but I don;t want it to just throw a value after the progress has reached to its end.
The second solution, though, is nice and works OK, but it in no way works in firefox. In firefox however, no error is thrown, and as I have tested, the progressEvent does not get triggered at all.
Both chrome and Firefox are of latest versions.
I think problem is you add onprogress listener after open(), it should be done before:
var xhr = new XMLHttpRequest();
xhr.onprogress = function (event) {
if (event.lengthComputable) {
console.log(event.loaded);
}
};
xhr.open("POST", "upload.php");
Or:
var xhr = new XMLHttpRequest();
xhr.addEventListener("progress", function (event) {
if (event.lengthComputable) {
console.log(event.loaded);
}
}, false);
xhr.open("POST", "upload.php");
Related
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'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);
}
}
Currently working on a project where we get a bunch of image over AJAX.
We do quite a lot of these, and it seems that IE11 seems to lose quite a few of them.
We get the image, call "URL.createObjectURL", get a valid URL, but by the next line, the image is gone. This works fine in other browsers, I'm assuming we're hitting some limit in IE.
Is there a nicer way of detecting if this URL is valid than trying to load it up?
Seems a little redundant to have to:
AJAX a file.
Get its address on the user's comp.
AJAX that address to make sure it's there.
Code:
var urlObj = window.URL || window.webkitURL;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
active--;
if (this.status == 200) {
var blobUrl = urlObj.createObjectURL(new Blob([this.response], {type : 'image/jpeg'}));
image.setSource(blobUrl);
}
}
}
xhr.open('GET', url);
xhr.responseType = 'arraybuffer';
xhr.send();
So if you call this A LOT (with different URLs) - the blobUrl that we pass to setSource is a sensible looking object URL, but when you try and use it, you get an error.
IE has either cleared up the memory, or lost the image or something. Bearing in mind we're not changing the page, losing the session, or revoking the blobUrl.
The only way I can think of to check if this has happened (i.e. that blobURL no longer points at anything), is to fire another AJAX request at the blobURL, and check it returns 200 etc....
Is there a better way? I'm imagining not.
I've "carved" this code-chunk from a larger block, so if there are any obvious mistakes there that's why. It works around 95% of the time. If I fire the AJAX "check" afterwards, and load the image again on a fail that fixes the issue.
Weird IE behaviour. Anyone else seen this?
More info: We're not using pdf.js, but same problem is reported here: https://connect.microsoft.com/IE/feedback/details/813485/resource-blob-not-found-when-using-url-createobjecturl-blob
This is (more or less) the check that we are using:
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (this.readyState == 4){
if (this.status == 200 || (this.response && this.response.type && this.response.type == "image/jpeg")) {
success(blobUrl);
}
else {
fail(blobUrl);
}
}
}
xhr.open('GET', blobUrl);
xhr.responseType = 'blob';
xhr.send();
Have to use that weird response.type check, because Firefox returns with status == 0.
I have used window.onbeforeunload on my javascript codes, but apparently it only works for FireFox:
<script type="text/javascript">
window.onbeforeunload = function (e) {
location.href="admin.jsp?action=logout";
};
</script>
I need this to close at least 5 renowned browsers (firefox,IE,opera,safari,and chrome). Can anyone help me out?
Use a synchronous XHR to do this, and use the unload event instead of onbeforeunload:
window.addEventListener('unload', function() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'admin.jsp?action=logout', false);
xhr.send(null);
}, false);
Im working on bookmarklets and my issue is js not getting update
I load js file with my bookmarklet, And my problem is its not getting update with my latest version. even also if i have updated it in my database.
So what i want it to check and load latest version when ever bookmark is clicked. so i want to know if there something to add in js file so it get load latest version. Or if there is way to check date and time or check version. etc
I have no problem with codes as they working fine.
Suppose this is my js
function start() {
// codes
};
// ---------------------------------------
// Ajax
// ---------------------------------------
function AJAXInteraction(url, callback) {
var req = init();
req.onreadystatechange = processRequest;
function init() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
else if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
function processRequest() {
if (req.readyState == 4) {
if (req.status == 200) {
if (callback) callback(req.responseText);
}
}
}
this.doGet = function () {
req.open("GET", url, true);
req.send(null);
}
this.doPost = function (str) {
req.open("POST", url, true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
req.send(str);
}
};
If you are appending a JS file to the page and you want to force your browser to always get a fresh copy of the file and not use the cache, then you can append any random text as part of the query string. Here is example code.
document.body.appendChild(document.createElement('script')).src = 'http://server.com/script.js?ts=' + new Date().getTime();
Alternatively, the server from which the file is being loaded could specify certain expiration information. To ensure you always get the latest, you could specify an expiration of sometime in the past.
Take a look at this: Setup HTTP expires headers using PHP and Apache