Flash 8 – Upload: Part I

Neben den vielen nützlichen Neuerungen für Designer in Flash 8 (wobei ich mich frage, wie Designer den Convolution-Filter und die Color-Matrix anwenden sollen, aber ich schweife ab …), finde ich persönlich die neue Upload Funktion von Flash nach wie vor sehr interessant. Vor Flash 8, gab es bereits einige Flash-Upload Umsetzungen, die jedoch mit vielen Fragezeichen behaftet waren, wie z.B. der Yamz Browser von Yamago

Soweit mir bekannt ist, gab es keine einzige Umsetzung, die Cross-Browser kompatibel war. Es gab große Einschränkungen, wie z.B. das JavaScript aktiviert sein muss.
Das Resultat dieser Einschränkungen war meist schlichtweg das man es nicht benutzte.

Seit es mit Flash 8 eine eigene Flashlösung gibt, die mit der Verwendung einer Serverside-Scriptsprache auskommt, sollte das anders sein und hier nehme ich schon mein Fazit?! vorweg.

Fangen wir vorne an. Es gibt ein neues Package: flash.net in dem man zwei neue Klassen FileReference und FileReferenceList findet. Der FileReference Klasse soll meiner Aufmerksamkeit im Besonderen gewidmet werden, da die FileReferenceList Klasse nur eine Erweiterung ist und keine zusätzliche Basisfunktionalität bietet.

Damit dieser Thread nicht zu theoretisch und langweilig wird, fangen wir mal direkt mit einer einfachen Upload-Anwendung an.
Die serverseitige Verarbeitung wird in diesem Beispiel mit PHP realisiert.

Download der Quelldateien

Initialisierung auf der Hauptzeitleiste:

var myUploader:MUploader = new MUploader(this);
// Browse Button
var browseListener:Object = new Object();
browseListener.click = function() {
	myUploader.browse();
};
browse_mc.addEventListener("click", browseListener);
// Upload Button
var uploadListener:Object = new Object();
uploadListener.click = function() {
	myUploader.upload();
};
upload_mc.addEventListener("click", uploadListener);
// Refresh-Button
var refreshListener:Object = new Object();
refreshListener.click = function() {
	myUploader.refreshFileList();
};
refresh_mc.addEventListener("click", refreshListener);
stop();

MUploader.as:

/**
 * 
 * @autor Nick Weschkalnies  
 * @description Uploader Version 1.0
 */
import flash.net.*;
import Delegate;
class MUploader {
	private var fileList_lv:LoadVars;
	private var fileRef:FileReference;
	private var fileRefListener:Object;
	private var target_mc:MovieClip;
	private var fileList:mx.controls.List;
	private var myFile_txt:TextField;
	private var status_txt:TextField;
	public function MUploader(mc:MovieClip) {
		target_mc = mc;
		fileList = target_mc.fileList;
		refreshFileList();
		myFile_txt = target_mc.myFile_txt;
		status_txt = target_mc.status_txt;
		fileRef = new FileReference();
		fileRefListener = new Object();
		fileRefListener.onSelect = Delegate.createPacked(this,fileSelected);
		fileRefListener.onOpen = Delegate.createPacked(this,fileUploadStarted);
		fileRefListener.onComplete  = Delegate.createPacked(this,fileUploadCompleted);
		fileRef.addListener(fileRefListener);
	}
	public function browse():Void {
		var myFileExtension:Array = new Array({description:"Images", extension:"*.jpg"});
		fileRef.browse(myFileExtension);
	}
	private function fileSelected(fileRef:FileReference):Void {
		myFile_txt.text = fileRef.name;
	}
	private function fileUploadStarted(fileRef:FileReference):Void {
		status_txt.text = "Please wait ...";
	}
	public function upload():Void {
		fileRef.upload("upload.php");		
	}
	private function fileUploadCompleted(fileRef:FileReference):Void {
		refreshFileList();
		status_txt.text = "Upload completed";
	}
	public function refreshFileList():Void {
		fileList_lv = new LoadVars();
		var zeitstempel:Number = new Date().getTime();
		fileList_lv.sendAndLoad("readDir.php?"+zeitstempel,fileList_lv,"POST");
		fileList_lv.onLoad = Delegate.createPacked(this,fileListRefreshed);			
	}
	private function fileListRefreshed():Void {
		var myFileArray = new Array() 
		myFileArray = fileList_lv.files.split(",");
		fileList.removeAll();
		for(var i:Number = 0;i<myFileArray.length;i++) {
			fileList.addItem(myFileArray&#91;i&#93;,myFileArray&#91;i&#93;);
		}
		
	}
}&#91;/code&#93;

PHP (upload.php):
&#91;code&#93;<?php
foreach ($_FILES as $fieldName => $file) {
	move_uploaded_file($file['tmp_name'], "files/".$file['name']);
	$myTempFile = "files/".$file['name'];
	chmod($myTempFile,0777);
}
?>

PHP (readDir.php):

<?php
$dir = 'files';
// Alle Dateien im Ordner in Array $Dateien ablegen
$dirhandle=opendir($dir);
$Dateien = array();
while($file=readdir($dirhandle)) {
	if($file != "." && $file != "..") { 
		if(is_file($dir.'/'.$file)) {
			array_push($Dateien,$file);
		} 
	}
}
$files = implode(",",$Dateien);
echo "&files=$files";
?>

Das ist die Ausgangsbasis für diesen Thread, der in Kürze fortgesetzt wird.
Im nächsten Teil gehe ich auf ein Sicherheitsaspekt und einige erweiterte Fehlerabfragen ein, die hier noch nicht berücksichtigt wurden.