La carga de archivos de arrastrar y soltar de Safari xhr parece ocurrir dos veces

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 */
        "dragover": function(e){
            var dt = e.originalEvent.dataTransfer;
            if(!dt) return;
            if($.browser.webkit) dt.dropEffect = 'copy';
        return false;
        "dragleave": function(e){
        "dragenter": function(e){return false;},
        "drop": function(e){
            var dt = e.originalEvent.dataTransfer;
            if(!dt&&!dt.files) return;
            var files = dt.files;
            for (var i = 0; i < files.length; 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 / );
            if(e.loaded =={
              console.log( e );
    }, false);
    xhr_upload.addEventListener( "load", function( e ){}, false);
    xhr_upload.addEventListener( "error", function( error ) { alert("error: " + error); }, false); '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);

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 == 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.

preguntado el 27 de agosto de 11 a las 21:08

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. -

Have you checked the contents of files? -

@Barum, backend gets correct files with the exact size, but the files seem to be transferred twice per upload. -

@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 <li> element for every file dropped, and I definitely don't see the same file being dropped twice. -

hmm.. maybe this guy is right - Safari/Windows is just a buggy pieace of crap .. -

2 Respuestas

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);    

and then again inslide your upload().

Respondido el 15 de Septiembre de 11 a las 17:09

I've already tried to log different variables, but it seems to me everything is happening behind the scene. - Andrey Kuzmin

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

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

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

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.

Respondido el 04 de Septiembre de 11 a las 00:09

cambiado upload a xhr_upload, but it didn't solve my problem. Thanks for this correction. - Andrey Kuzmin

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.