Oggetto FormData

[mxa]

Come forse ho gia' detto in un altro post, sto implementando un plugin per jQuery che consente l'upload di file con drag&drop. I browser webkit supportano l'uso dell'oggetto FormData (che sara' supportato anche in Firefox dalla versione 4).

Questo e' il codice della funzione che gestisce l'upload

var upload_wk = function (event, target, options) {
            show_progress (target);
            var data = event.dataTransfer;
            var files = data.files;
            var fdata = new FormData();
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                fdata.append ('file' + i, file);
            }
            var xhr = new XMLHttpRequest();
            xhr.open("POST", options.url, true);
            xhr.upload.addEventListener("progress", function (event) {
                if (event.lengthComputable) {  
                    var percentComplete = event.loaded / event.total;
                    $("#meter").text (Math.round(percentComplete * 100) + '%');
                }
                else {
                    // Unable to compute progress information since the total size is unknown
                }
            }, false);
            xhr.addEventListener("load", function (event) {$("#upload-meter").fadeTo ('slow', 0);$("#upload-meter").remove();options.complete (event)}, false);
            xhr.addEventListener("error", function (event) {$("#upload-meter").fadeTo ('slow', 0);$("#upload-meter").remove();options.failed (event)}, false);
            var optionalHeaders = options.headers;
            for (var i = 0; i < optionalHeaders.length; i ++) {
                xhr.setRequestHeader(optionalHeaders[i].header, optionalHeaders[i].value);
            }
            xhr.send (fdata);
        }; 

Il problema sta nel fatto che la callback del progress non viene chiamata. Pero' se prima di fare la send setto manualmente l'header relativo al content type allora si' che viene chiamata. Ma il content type e' bene che sia settato automaticamente, perche' io non posso sapere a priori quali siano i boundaries tra i file che l'oggetto FormData usa.

Qualcuno di voi si e' gia' scontrato con questo problema?

[mxa]

Incredibile, postare i problemi sul forum mi fa sempre trovare la soluzione, porta fortuna si vede

Per risolvere ho deciso di provare a settare un header qualunque per vedere se cio' sbloccava la callback. Per far le cose bene, mi sono ricordato che jQuery setta sempre un header 'X-Requested-With' quando fa richieste AJAX, cosi' ho fatto lo stesso: prima della send ho aggiunto:

xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

e adesso la callback per la progress viene chiamata.

Penso che il drag&drop dal desktop all'applicazione web stia per diventare di moda, quindi spero che questo post sia utile anche a voi oltre che fare venire a me le illuminazioni su possibili soluzioni. Ma comunque di esempi di file drag&drop il web e' pieno, e' che poi quando provi a mettere tutto insieme iniziano i casini