UPLOAD TO SERVER VIA FLASH                                      as3,php


    This tutorial will teach you how to make a simple "upload to your server via flash" feature, either you want to upload pictures or documents to desired folder on your server. Contains function to browse your computer for files and progress bar while uploading files. At the end we should get something similar to this (for obvious reasons demo below does not upload files, all you need to do is set up path to the upload php script in *fla file, both are included in source file archive you can download at the end of this page):



     We start by creating two buttons, one for browsing the computer, the other one to initiate upload itself. Set their instace names to browse_btn and upload_btn. Now insert two dynamic text fields. Call the first one fileDisplay_txt, this one will show the name of chosen file to upload. The second one will be called status_txt to display success or error messages. The last thing we need before we start playing with actionscript is progress bar. Create rectangle. Convert it to movieclip. Name it progressBar and set its width to minimum. Ofcourse we dont want the upload button and progress bar to be seen untill theres actual file selected and ready to be uploaded. We can fix that by creating another movieclip. Rectangle with the color of stage background is the esiest way. Make sure its above progress bar and upload button and cover them both. Name this movieclip blocker. Insert new layer and paste the following actionscript on the first frame. 





uploadMsg.visible = false;

var URLrequest:URLRequest = new URLRequest("_path/uploader.php");
var imageTypes:FileFilter = new FileFilter
					("Images(*.jpg,*.jpeg,*.gif,*.png)","*.jpg; *.jpeg; *.gif; *.png");
var textTypes:FileFilter = new FileFilter("Text Files (*.txt, *.rtf)", "*.txt; *.rtf");
var allTypes:Array = new Array(imageTypes, textTypes);
var fileRef:FileReference = new FileReference();

fileRef.addEventListener(Event.SELECT, syncVariables);
fileRef.addEventListener(Event.COMPLETE, completeHandler);
fileRef.addEventListener(ProgressEvent.PROGRESS, progressHandler);

browse_btn.addEventListener(MouseEvent.CLICK, browseBox);
upload_btn.addEventListener(MouseEvent.CLICK, uploadVars);


function browseBox(event:MouseEvent):void {
	fileRef.browse(allTypes);
}

function uploadVars(event:MouseEvent):void {
	uploadMsg.visible = true;
	fileRef.upload(URLrequest);
	upload_btn.visible = false;
}

function syncVariables(event:Event):void {
	 fileDisplay_txt.text = "" + fileRef.name;
	 blocker.visible = false;
	 upload_btn.visible = true;
	 progressBar.width = 2;
}

function completeHandler(event:Event):void {
	uploadMsg.visible = false;
	blocker.visible = true;
    status_txt.text = fileRef.name + " has been uploaded.";
    fileDisplay_txt.text = "";
}

function progressHandler(event:ProgressEvent):void {
    progressBar.width = Math.ceil(200*(event.bytesLoaded/event.bytesTotal));
}



     Line 2 sets the path to the upload script in php file. Lines 3-8 assign different image and document formats to the browse filters and adds them both to an array. Lines 10-15 are event listeners for file reference functions and both buttons. Lines 18-20 adds browse function to browse button and on lines 22-26 is function for upload button. 28-33 function fires off when files is selected from browse window. Displays its name, hides movieclips that blocks upload button and progress bar. Function on 35-40 runs after upload is finished. The last function increases the progress bar length as file uploads. The last thing we need is the php upload cript. Create new php file, name it uploader.php and insert this php code into it.



DOWNLOAD SOURCE FILE