WebFaction
Community site: login faq

I think it might be Webfaction specific, because it works ok with my local dev cherrypy server.

Here are some bits from my javascript code I use for upload:

/* Code from drop event: */
var dt = e.originalEvent.dataTransfer;
if(!dt&&!dt.files) return;
var files = dt.files;
for (var i = 0; i < files.length; i++) {
    upload(files[i]);
}

/* Upload function code cut down to the basic  */
function upload(file) {
    var xhr = new XMLHttpRequest();
    var upload = xhr.upload;
    upload.addEventListener("progress", function(e){
        if( e.lengthComputable ) {
            var p = Math.round(e.loaded * 100 / e.total );
            if(e.loaded == e.total){
              console.log( e );
            }
        }
    }, false);
    upload.addEventListener( "load", function( e ){}, false);
    upload.addEventListener( "error", function( error ) { alert("error: " + error); }, false);
    xhr.open( 'POST', url, true);
    xhr.onreadystatechange = function ( e ) {   };
    xhr.setRequestHeader("Cache-Control", "no-cache");
    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    xhr.setRequestHeader("Content-Type", file.type);
    xhr.setRequestHeader("X-File-Name", encodeURIComponent(file.fileName));
    xhr.setRequestHeader("X-File-Size", file.fileSize);
    xhr.send(file);
}

If I fill span with percentage value in progress event, then in Safari it goes from 0% to 100%, then from 50% to 100%, and after that upload is done. Chrome and Firefox are OK.

e.loaded == e.total is reached twice per upload, since I see this in my console log:

console log

In the first logged event totalSize is equal to the size of file, but in the second it is twice as much.

asked 27 Aug '11, 16:04

dw0rm
113
accept rate: 0%

Fixed by using FormData instead of manually creating xhr request.

(22 Nov '11, 03:55) dw0rm

Just to be sure, this only occurs with Safari?

It does not occur with Chrome or Firefox?

If that is the case I would think it is something related to how that browser renders the java-script, and may be difficult to troubleshoot.

The only thing that comes to mind is perhaps the nginx proxy server. Perhaps it is calculating the headers twice, but as far as I can tell the code looks OK. I admit I have not used XHR in the past.

permanent link

answered 27 Aug '11, 17:23

johns
5.4k412
accept rate: 23%

Chrome and Firefox are fine, so is Safari in my local dev environment. Even though progress counts twice up to 100% during upload, the uploaded file size on server is normal. This is my post from over a year ago it didn't work at all back then.

(27 Aug '11, 23:09) dw0rm

There was an interesting suggestion on the old forum, what happens if you connect to the app directly over a SSH tunnel? This would get nginx out of the way and we could see if it was involved.

(27 Aug '11, 23:14) johns

I tried to upload with direct connection to my app, and 1mb upload was logged twice (but very fast), but upload of 7mb file was correct.

I then uploaded the same 7mb file without ssh tunnel, and again it counted up to 100% twice and logged two events.

(28 Aug '11, 03:07) dw0rm

We are not sure how our setup would cause two xhr events, are there two events in Chrome too?

Since, it appears to be going correctly in Chrome and Firefox, it maybe a bug in Safari. You should try filing a bug report here::
https://bugs.webkit.org/

(28 Aug '11, 03:45) neeravk

No, only one event is logged in Chrome and Firefox with the correct totalSize. It seems to be a bug in Safari. If only I could know what triggers it to send the request twice, is there any easy way I can trace the packets between Safari and the server client-side?

(28 Aug '11, 04:00) dw0rm

Ngrep could be useful in doing that:

http://ngrep.sourceforge.net/usage.html#http
(28 Aug '11, 04:07) neeravk
showing 5 of 6 show 1 more comments
Your answer
toggle preview

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text](http://url.com/ "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported

Question tags:

×29
×8
×1

question asked: 27 Aug '11, 16:04

question was seen: 4,063 times

last updated: 22 Nov '11, 03:55

WEBFACTION
REACH US
SUPPORT
AFFILIATE PROGRAM
LEGAL
© COPYRIGHT 2003-2020 SWARMA LIMITED - WEBFACTION IS A SERVICE OF SWARMA LIMITED
REGISTERED IN ENGLAND AND WALES 5729350 - VAT REGISTRATION NUMBER 877397162
5TH FLOOR, THE OLD VINYL FACTORY, HAYES, UB3 1HA, UNITED KINGDOM