Safari xhr drag'n'drop file upload seems to occur twice

Question

It can be related to Webfaction configuration (they have nginx proxy, and my app is webpy running under apache2+mod_wsgi) because it works in my dev cherrypy server.

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

/* Bind drop events */
    $(this).bind({
        "dragover": function(e){
            var dt = e.originalEvent.dataTransfer;
            if(!dt) return;
            if($.browser.webkit) dt.dropEffect = 'copy';
            $(this).addClass("active");
        return false;
        },
        "dragleave": function(e){
            $(this).removeClass("active")
        },
        "dragenter": function(e){return false;},
        "drop": function(e){
            var dt = e.originalEvent.dataTransfer;
            if(!dt&&!dt.files) return;
            $(this).removeClass("active")
            var files = dt.files;
            for (var i = 0; i < files.length; i++) {
                upload(files[i]);
            }
            return false;
        }
    })

/* Upload function code cut down to the basic  */
function upload(file) {
    var xhr = new XMLHttpRequest();
    var xhr_upload = xhr.upload;
    xhr_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);
    xhr_upload.addEventListener( "load", function( e ){}, false);
    xhr_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 http://img824.imageshack.us/img824/4363/screenshot20110827at101.png

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

It might be helpful to see how and where the drop event is triggered. I have to wonder if there are two drop events being fired for some reason. — Ryan Kinal, Sep 06 '11 at 16:55
@Barum, backend gets correct files with the exact size, but the files seem to be transferred twice per upload. — Andrey Kuzmin, Sep 12 '11 at 05:39
@Ryan, I've updated the question with drop event bind excerpt. I don't see this as a problem, since in my code upload creates
@Andrey - What, in this case, is `this`? What selectors are you using? — Ryan Kinal, Sep 12 '11 at 12:41
@Ryan, Uploader is implemented as jquery plugin, and is tightly coupled with the cms project. Basically `this` can be any element selected by jquery, in my case it is `$( ".ui-storage-documents" )`. — Andrey Kuzmin, Sep 12 '11 at 14:38
You might consider using an HTTP inspector to see whether there are actually multiple requests and responses happening, and what they look like. — Ryan Kinal, Sep 13 '11 at 14:24
Do you know how to debug Safari protocol-level? I need to get the dump of data that is going between Safari and the server. Network tab in Web Inspector shows that only one request is made. — Andrey Kuzmin, Sep 16 '11 at 08:39
`progress` is not a part of any standard yet, so Safari can afford it to be buggy. http://www.w3.org/TR/progress-events/ — c69, Sep 16 '11 at 10:56
@c69 Its ok if only progress state display is incorrect, but it seems that Safari uploads the file twice, which is twice more time to wait for upload. — Andrey Kuzmin, Sep 16 '11 at 13:58
hmm.. maybe this guy is right - Safari/Windows is just a buggy pieace of crap .. http://www.smilingsouls.net/Blog/20110413023355.html — c69, Sep 16 '11 at 14:07
@c69, my Safari is OS X one. The link is interesting, thanks! — Andrey Kuzmin, Sep 16 '11 at 22:02
Although likely unrelated to the issue you're experiencing, the line `if(!dt&&!dt.files) return;` should be `if(!dt||!dt.files) return;` in order to prevent errors if `dt` is undefined or unintended results if only `dt.files` is undefined. — Karthik Viswanathan, Sep 19 '11 at 06:22

score 1 · Answer 1 · answered Sep 15 '11 at 13:05

1

I would try heavy use of the console to get to the bottom of something like this. Put a console statement at every major piece of code displaying something meaningful each time:

for (var i = 0; i < files.length; i++) 
{
console.log(files[i]+", "+i);    
upload(files[i])
};

and then again inslide your upload().

answered Sep 15 '11 at 13:05

T9b

3,312
5
31
50

I've already tried to log different variables, but it seems to me everything is happening behind the scene. – Andrey Kuzmin Sep 16 '11 at 08:36
I'm not saying you should use it to check variable values, but to check the sequence of execution of your code. You do not have to use a variable for that - you can use plain text. It's pretty straightforward, and helps to resolve logical / sequencing errors in your code. – T9b Sep 16 '11 at 12:29
To check the sequence of execution I usually set breakpoints, Script tab in Safari's Web Inspector allows to do that. But that didn't help me to find the problem in my code. – Andrey Kuzmin Sep 16 '11 at 13:56
the trouble with breakpoints is that it does exactly that. It breaks the flow, and requires you to make it continue to the next breakpoint. Far slower than actually printing the sequence as it occurs, and I get a headache trying to remember where I've been. In fact by definition, that's exactly the purpose of a (console)log. – T9b Sep 16 '11 at 20:44

score 0 · Answer 2 · answered Sep 03 '11 at 20:57

0

Could it have something to do with having a variable and a function with the same name (upload)? In Javascript, you can use the name of a function as a reference to it. Try renaming your xhr.upload variable and see if it fixes anything.

answered Sep 03 '11 at 20:57

someone

1,468
8
9

Changed `upload` to `xhr_upload`, but it didn't solve my problem. Thanks for this correction. – Andrey Kuzmin Sep 12 '11 at 05:57

Safari xhr drag'n'drop file upload seems to occur twice

2 Answers2

Linked