Flash 8 – Upload: Part IV

Schauen wir uns mal an, wie sich ein Batch-Upload umsetzen lässt. Im vorliegenden Beispiel können mehrere Dateien zum Upload ausgewählt werden. Diese werden in eine Upload-Liste eingefügt. Beim Mausklick auf den Upload Button wird die Liste nach und nach abgearbeitet und die Dateien hochgeladen.

In diesem Teil gehe ich nur auf die wichtigstens neuen Code-Abschnitte ein. Für den Batch-Upload wird ein Objekt der Klasse FileReferenceList benötigt. Die Eigenschaft fileList des Objekts ist vom Datentyp Array. Das Array beinhaltet mehrere FileReference Objekte. So lässt sich die Dateigröße des ersten FileReference Objekt der FileReferenceList bspw. so ansprechen.

fileRefList.fileList[0].size

Mit einer for oder while Schleife lassen sich so alle Eigenschaften des jeweiligen FileReference Objekts auslesen. Das Objekt und ein Listener werden als lokale Eigenschaften der Klasse definiert.

private var fileRefListListener:Object;
private var fileRefList:FileReferenceList;

Für die Darstellung der Upload-Liste wird eine DataGrid Komponente verwendet:

private var myGrid:mx.controls.DataGrid;
public function MUploader(mc:MovieClip) {
...
	myGrid = target_mc.myGrid;
	myGrid.columnNames = ["Name", "Größe", "creationDate","modDate"];
	// Size for Columns
	myGrid.getColumnAt(0).width = 120;
	myGrid.getColumnAt(1).width = 60;
	myGrid.getColumnAt(2).width = 120;
	myGrid.getColumnAt(3).width = 120;
	// Activate horizontally scrolling
	myGrid.hScrollPolicy = "on";
...
}

Nach dem die Dateien zum Upload ausgewählt wurden, wird die DataGrid Komponente entsprechend gefüllt.

private function updateFileInfo():Void {
	var fileList:Array = fileRefList.fileList;
	for(var i:Number = 0;i<fileList.length;i++) {
		var aktFile = fileList&#91;i&#93;;
		var aktItem:Object = {Name:aktFile.name,Größe:aktFile.size,creationDate:aktFile.creationDate,modDate:aktFile.modificationDate};
		myGrid.addItem(aktItem);
	}
}&#91;/code&#93;
Die Methoden "checkFileSize" und "checkFileExtension" müssen jetzt alle ausgewählten Dateien überprüfen. Die Eigenschaft fileList des FileReferenceList Objekts ist ein Array mit den selektierten Dateien. Die Methoden werden wie folgt geändert
&#91;code&#93;private function checkFileSize():Void {
	myGrid.removeAll();	
	fileChecked = false;
	var fileList:Array = fileRefList.fileList;
	for(var i:Number = 0 ;i<fileList.length;i++) {
		var aktFile:FileReference = fileList&#91;i&#93;;
		var myFileSize = aktFile.size / 1024;
		var result:Boolean = false;
		if(myFileSize > maxFileSize) {
			result = false;
		} else {
			result = true;
		}
	}
	if(result == false) {
		status_txt.text = "Please reduce the filesize!";
	} else {
		checkFileExtension();
	}
}

Man beachte die erste Zeile „myGrid.removeAll();“. Bei jedem Aufruf der Methode browse() des FileReferenceList Objekts wird das Array (fileList) neu intialisiert. Das lässt sich leider nicht verhindern – dadurch ist ein zusätzliches Hinzufügen von Dateien nicht direkt möglich.

private function checkFileExtension():Void {
	var fileList:Array = fileRefList.fileList;
	for(var i:Number = 0;i<fileList.length;i++) {
		var aktFile:FileReference = fileList&#91;i&#93;;
		// Extract Extension
		var firstPosition = aktFile.name.indexOf(".");
		var lastPosition = aktFile.name.indexOf(".",firstPosition+1);
		var myExtension:String = aktFile.name.substr(firstPosition+1).toLowerCase();
		var result:Boolean = false;
		if(lastPosition != -1 || myExtension != "jpg") {
			result = false;
		} else {		
			result = true;
		}
	}
	if(result == false) {
		status_txt.text = "Wrong File-Extension: "+fileRef.name;
		fileRefList.fileList = null;
	} else {
		// Call fileSelected
		fileChecked = true;
		fileSelected();
	}
}&#91;/code&#93;
Nachdem eine Datei vollständig hochgeladen wurde, wird die Datei zunächst aus der DataGrid Komponente und der FileReferenceList entfernt und anschließend geprüft ob noch weitere Dateien in der Upload-Liste existieren. Ist das der Fall wird der Upload für die nächste Datei initialisiert.
&#91;code&#93;private function fileUploadCompleted():Void {
	aktTotalSize +=fileRefList.fileList&#91;0&#93;.size;
	refreshFileList();
	fileRefList.fileList.splice(0,1);
	myGrid.removeItemAt(0);
	if(fileRefList.fileList.length >0) {
		// Upload next file
		upload();
	} else {
		// Batch Upload completed
		aktTotalSize = 0;
		uploadProgress = false;
		status_txt.text = "Upload completed";
		progressDisplay_mc._visible = false;
	}
}

Die neue Upload Methode sieht so aus:
public function upload(firstStart:Boolean):Void {
if(fileChecked == true) {
if(firstStart == true) {
uploadProgress = true;
// Overall Filesize Calculation
var fileList:Array = fileRefList.fileList;
overAllSize = 0;
for(var i:Number = 0;iIch bin kein großer Fan der MM-Komponenten (V2 Architektur, Dateigrößen …) – dennoch werden diese Komponenten hier verwendet, da die Erläuterung der Funktionsweise des Flash-Uploads im Vordergrund steht. Als kleines Gimmick werden hier im Fortschrittbalken vertikale Linien eingezeichnet, welche durch ihre x-Position die jeweilige Dateigröße im Fortschrittsbalken symbolisieren.

Falls Ihr Fragen dazu habt, beantworte ich diese natürlich gerne. Schreibt einfach einen Kommentar in den Blog.
Anyway, Part V is coming …

[Edited: Die Online-Demo habe ich eingestellt – kostet einfach Zeit die Uploads in regelmäßigen Abständen zu überprüfen.]
Flash Upload – Version 4.1 Quelldateien herunterladen