Rimuovere il file dalla coda di plupload?

Question

Sto provando a limitare le estensioni di file che possono essere caricate tramite plupload.

perché i filtri non funzionano correttamente con il runtime HTML5 Non li posso utilizzare. quindi ho il codice qui sotto binded alla FilesAdded evento

var extensionArray = ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx']; 
uploader.bind('FilesAdded', function (up, files) { 
    var invalid = 0; 
    for (var i in files) { 
     var extension = files[i].name 
           .substr((files[i].name.lastIndexOf('.') + 1)) 
           .toLowerCase(); 

     if (extension == '' || -1 === $.inArray(extension, extensionArray)) { 
      uploader.splice(i, 1); //also tried uploader.removeFile(files[i]) 
      invalid++; 
      continue; 
     } 
     //dom manipulation to add file occurs here 
    } 
}); 

Ma, mentre questo è fermare la manipolazione dom verificano per qualsiasi file non validi, non sembra di essere effettivamente rimuovere la voce dalla coda come quando Io inizio il caricamento sono tutti inviati!

Ciò accade sia su HTML5 che su Flash Runtime. Non ho ancora testato gli altri.

Collegamento all'evento FilesRemoved, non viene mai attivato! ma inserendo console.log('Invalid files detected'); appena prima dello uploader.splice(... viene emesso alla console, in modo che venga chiamata la linea.

Answer 1

Versione abbreviata: è necessario eseguire il binding all'evento filesAddeddopo chiamando la funzione init().

il mio primo passo per il debug è stato afferrare the uncompressed version off github^{18 nov 2012}. Una volta ottenuto ciò, ho potuto rintracciare il problema.

Quindi il problema principale sembrava essere che la chiamata a removeFile() non veniva mai chiamata, ma perché?

removeFile() è stata definita come:

removeFile: function (file) { 
    var i; 

    for (i = files.length - 1; i >= 0; i--) { 
     if (files[i].id === file.id) { 
      return this.splice(i, 1)[0]; 
     } 
    } 
} 

Ok, piuttosto semplice, questo scorre la matrice dei file e se c'è un file che ha l'ID corrispondente allora chiamiamo la funzione di giunzione.

Quindi, che aspetto ha la giunzione?

splice() è stata definita come:

splice:function (start, length) { 
    var removed; 

    // Splice and trigger events 
    removed = files.splice(start === undef ? 0 : start, length === undef ? files.length : length); 

    this.trigger("FilesRemoved", removed); 
    this.trigger("QueueChanged"); 

    return removed; 
} 

destro, così che è dove l'evento FilesRemoved avrebbe dovuto essere innescato, quindi perché no?

Torna alla funzione removeFile(), come indicato, chiama solo splicing se viene trovato un ID corrispondente.

Quindi, il passo successivo è stato scoprire se la funzione removeFile è stata persino chiamata.

Inserimento console.log('removeFile called', files); come prima linea ci ha dato l'output: removeFile called []

Hmmm, un array vuoto!

Ok, quindi, sembra che noi vincolanti per l'evento FilesAdded si fermi è il comportamento normale, nessun problema. aggiungiamo semplicemente uploader.files.push(file) al nostro binding FilesAdded. ed ecco ed ecco. quando facciamo clic su Start, vengono inviati solo i file corretti.

Sta funzionando ... ma non del tutto.
Ho avuto un paio di collegamenti extra lì, solo per scopi di debug, uno di quelli era su QueueChanged. questo ha registrato la quantità di file nella coda ogni volta che c'è stata una modifica.

Quello che ho notato è che il numero di file nella coda non rifletteva effettivamente che c'erano file rimossi dalla coda.

Quindi, un rapido console.log(uploader.files.length) e questo ha confermato che c'era qualcos'altro che succedeva qui.

Il passaggio successivo è stato esaminare l'azione predefinita per l'aggiunta di file.

Guardando ho notato che gli sviluppatori hanno deciso di associarsi all'evento, facendo questo all'interno della funzione init. Una strana scelta guardandola dal mio punto di vista. Ma questa è la loro scelta.

Quindi, guardando all'interno della loro rilegatura avevano anche un files.push(file) che significava ottenere tutti i file + duplicati dei file corretti nell'array.

Constatando che il legame che stava accadendo nel funzione init(), ho rimosso il uploader.files.push(file) dal mio legame, spostato il init() chiamata a prima del mio FilesAdded vincolante. e ora tutto funziona bene.

Answer 2

uploader=newplupload.Uploader({ 
//----- 
}); 

uploader.bind('FilesAdded',function(up,files) 
{ 
//---- 
up.refresh();//RepositionFlash/Silverlight 
}); 

uploader.bind('QueueChanged',function(up,files){ 

//#doc-filelist is the id of dive, which shows the Queue 
$('#doc-filelist').html(''); 

$.each(uploader.files,function(i,file){ 
$('#doc-filelist').append(
'<div id="'+file.id+'">'+ 
file.name+'('+plupload.formatSize(file.size)+')<b></b>'+ 
'<spanclass="remove_file"data-file="'+i+'">X</span>'+ 
'</div>'); 
}); 

if(uploader.files.length==0){ 
// #uploadfiles button for start upload 
$('#uploadfiles').addClass('disabled'); 
} 

}); 

uploader.bind('UploadComplete', function (up, file) { 
    up.splice(); 
    up.refresh(); 

}); 


$('.relevant-document').on('click','.remove_file',function(e){ 

uploader.splice($(this).attr('data-file'),1); 

uploader.refresh(); 
});