Datei aus der Warteschlange entfernen?

Question

Ich versuche, die Dateierweiterungen zu begrenzen, die durch plupload hochgeladen werden können.

weil die Filter nicht richtig mit der HTML5-Laufzeit arbeiten, kann ich sie nicht verwenden. daher habe ich den folgende Code an das FilesAdded Ereignis

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

Aber binded, während dies ist die DOM-Manipulation nach ungültigen Dateien auftreten zu stoppen, ist es nicht wirklich zu sein scheint das Element aus der Warteschlange zu entfernen, wie wenn ich initiieren den Upload werden sie alle gesendet!

Dies geschieht sowohl auf der HTML5 und der Flash-Laufzeit. Ich habe die anderen noch nicht getestet.

Bindung an das Ereignis FilesRemoved, es wird nie ausgelöst! aber Einfügen console.log('Invalid files detected'); kurz vor uploader.splice(... es wird an die Konsole ausgegeben, so dass die Linie aufgerufen wird.

Answer 1

Kurzfassung: Sie müssen das filesAdded Ereignis binden nach Aufruf der init() Funktion.

mein erster Schritt für das Debuggen war the uncompressed version off github^{18. November 2012} zu greifen. Sobald ich das hatte, konnte ich das Problem verfolgen.

Also das primäre Problem schien zu sein, dass der Anruf an removeFile() wurde nie aufgerufen, aber warum?

removeFile() wurde wie folgt definiert:

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, ziemlich einfach, diese die Dateien Array durchläuft und wenn es eine Datei, die die passende ID hat, ist dann rufen wir die Spleiß-Funktion.

Also, wie sieht Spleiß aus?

splice() wurde wie folgt definiert:

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

Richtig, das ist so, wo das FilesRemoved Ereignis ausgelöst worden sein, so war, warum es nicht?

Zurück in der removeFile() Funktion, wie erwähnt, ruft es nur Spleiß , wenn eine übereinstimmende ID gefunden wird.

Der nächste Schritt war also herauszufinden, ob die removeFile-Funktion überhaupt aufgerufen wurde.

Einfügen console.log('removeFile called', files); als die erste Zeile hat uns die Ausgabe: removeFile called []

Hmmm, ein leeres Array!

Ok dann, Sieht aus, als ob uns die Bindung an das FilesAdded Ereignis stoppt sein übliches Verhalten, kein Problem. Lassen Sie uns einfach uploader.files.push(file) zu unserer FilesAdded Bindung hinzufügen. und siehe da. Wenn wir auf Start klicken, werden nur die richtigen Dateien gesendet.

Es funktioniert ... aber nicht ganz.
Ich hatte ein paar zusätzliche Bindungen, nur für Debugging-Zwecke, eine davon war auf QueueChanged. Dies protokollierte die Anzahl der Dateien in der Warteschlange bei jeder Änderung.

Was ich bemerkte war, dass die Anzahl der Dateien in der Warteschlange nicht wirklich widerspiegelte, dass Dateien aus der Warteschlange entfernt wurden.

Also, eine schnelle console.log(uploader.files.length) und dies bestätigt, dass hier noch etwas anderes los war.

Der nächste Schritt war, zu sehen, was die Standardaktion zum Hinzufügen von Dateien war.

Als ich bemerkte, dass die Entwickler beschlossen, auch an das Ereignis zu binden, tun dies innerhalb der Init-Funktion. Eine seltsame Wahl, die es aus meiner Perspektive betrachtet. Aber das ist ihre Wahl.

Also, in ihre Bindung schauen sie hatten auch eine files.push(file) bedeutet, dass wir alle Dateien + Duplikate der richtigen Dateien im Array bekommen.

Anbetracht dessen, dass die Bindung geschah in der init(), Funktion, Ich entfernte die uploader.files.push(file) aus meiner Bindung, zog die init() Aufruf vor meiner FilesAdded verbindlich. und jetzt funktioniert alles gut.

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