Home Tutorials Forums Articles Blogs Movies Library Employment Press

Go Back   ActionScript.org Forums > ActionScript Forums Group > ActionScript 3.0

Reply
 
Thread Tools Rating: Thread Rating: 1 votes, 5.00 average. Display Modes
Old 05-10-2012, 10:37 AM   #1
l_tilter0405
Registered User
 
Join Date: Apr 2012
Posts: 8
Default FileReference - Select and Upload Multiple Files one at a time

Hiya

I currently have an swf that allows you to select and display a file and upload it to the server using FileReference. This works great but i need to be able to select and display multiple (up to 25 in some cases) and then upload them all at the end.

I know you can use the FileReferenceList to select multiple files at the same time in the dialog popup but my issue is that the user needs to select one at a time, do stuff to that image, then select another, do stuff and so on... then at the end when they press upload it upload them all onto the server.

Is it possible or is there a way so i can maybe add every new selected file into an array, then at the end it uploads all the files in the array either in one go or loops through each until all objects in the array are complete?

Can anyone help? I'll post the full code for my working single file upload below.

Please, please help, i'm limited with flash and have only been learning for 3-4 months and i've been stuck for over a week now

Lauren

as3 Code:
Code:
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.net.FileReference;
import flash.net.FileFilter;
import flash.utils.ByteArray;
import flash.events.MouseEvent;
import flash.events.Event;
import flash.events.IOErrorEvent;
import flash.display.MovieClip;
import fl.controls.ProgressBarMode;
import flash.display.Bitmap;
import flash.display.BitmapData;

progressBar.visible=false;
UploadprogressBar.visible=false;

// Create FileReference.
var imageFile:FileReference;

// Create Loader to hold image content
var image_loader:Loader = new Loader();
var image_content:Sprite = new Sprite();

// Get Extension Function.
var imageExtension;

function getExtension($url:String):String {
    var extension:String = $url.substring($url.lastIndexOf(".")+1, $url.length);
    return extension;
}

// Random Number Function to create new filename on server.
function randomNum(low:Number=0, high:Number=1):Number {
	return Math.floor(Math.random() * (1+high-low)) + low;
}
var myNumber:Number= randomNum(1000,9999);
var myString:String= String(myNumber);
var RandomNumbers = myString;
var imageFilePath = (RandomNumbers);

// Select Button Function.
select_btn.addEventListener(MouseEvent.CLICK, onselect_btnClicked);

function onselect_btnClicked(event:MouseEvent):void {
	imageFile=new FileReference();
	imageFile.addEventListener(Event.SELECT, onFileSelected);
	var imageTypeFilter:FileFilter = new FileFilter("JPG/PNG Files","*.jpeg; *.jpg;*.gif;*.png");
	imageFile.browse([imageTypeFilter]);
}

// File Selected Function.
function onFileSelected(event:Event):void {
	imageFile.addEventListener(Event.COMPLETE, onFileLoaded);
	imageFile.addEventListener(ProgressEvent.PROGRESS, onProgress);
	var imageFileName = imageFile.name;
	imageExtension = getExtension(imageFileName);
	imageFile.load();

	progressBar.visible=true;
	progressBar.mode=ProgressBarMode.MANUAL;
	progressBar.minimum=0;
	progressBar.maximum=100;
	UploadprogressBar.mode=ProgressBarMode.MANUAL;
	UploadprogressBar.minimum=0;
	UploadprogressBar.maximum=100;
}

// File Progress Function.
function onProgress(event:ProgressEvent):void {
	var percentLoaded:Number=event.bytesLoaded/event.bytesTotal*100;
	progressBar.setProgress(percentLoaded, 100);
}

// File Loaded Function.
function onFileLoaded(event:Event):void {
	var fileReference:FileReference=event.target as FileReference;

	var data:ByteArray=fileReference["data"];
	var movieClipLoader:Loader=new Loader();
	movieClipLoader.loadBytes(data);
	movieClipLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onMovieClipLoaderComplete);

	imageFile.removeEventListener(Event.COMPLETE, onFileLoaded);
	imageFile.removeEventListener(ProgressEvent.PROGRESS, onProgress);
}

// Load Image onto Stage Function.
function onMovieClipLoaderComplete(event:Event):void {
	var loadedContent:DisplayObject=event.target.content;
	image_loader =event.target.loader as Loader;
	
	var scaleWidth:Number=345/image_loader.width;
	image_loader.scaleX=image_loader.scaleY=scaleWidth;
	image_loader.height=200;
	image_loader.scaleX=image_loader.scaleY;
	image_loader.x=10;
	image_loader.y=10;
	
	image_content.buttonMode=true;
	image_content.addChild(image_loader);
	addChild(image_content);
}

// Upload Button Function.
upload_btn.addEventListener(MouseEvent.CLICK, onupload_btnClicked);

function onupload_btnClicked(event:MouseEvent):void {
	var filename:String=imageFile.name;
	var urlRequest:URLRequest = new URLRequest("...xxxxx.com/xxxxx/file-reference.php");
	var variables:URLVariables = new URLVariables();
	urlRequest.method = URLRequestMethod.POST;
	imageFile.addEventListener(ProgressEvent.PROGRESS, onUploadProgress);
 	imageFile.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA,onUploadComplete);
	variables.ID = (RandomNumbers);
	urlRequest.data = variables;
	imageFile.upload(urlRequest);
}

// File Upload Progress Function.
function onUploadProgress(event:ProgressEvent):void {
	var percentLoaded:Number=event.bytesLoaded/event.bytesTotal*100;
	UploadprogressBar.setProgress(percentLoaded, 100);
	trace("loaded: "+percentLoaded+"%");
	upload_status_txt.text='upload in progress...';
}

// Upload File Completed Function.
function onUploadComplete(event:Event):void {
	upload_status_txt.text='upload complete';
	imageFile.removeEventListener(ProgressEvent.PROGRESS, onProgress);
	imageFile.removeEventListener(DataEvent.UPLOAD_COMPLETE_DATA,onUploadComplete);
	UploadprogressBar.visible=false;
}
php Server Code:
Code:
<?php
function getExtension($str) {
	$i = strrpos($str,".");
	if (!$i) { return ""; }
		$l = strlen($str) - $i;
		$ext = substr($str,$i+1,$l);
		return $ext;
}

$fileID = $_POST['ID'];
$filename = basename( $_FILES['Filedata']['name']);

$extension = getExtension($filename);
$extension = strtolower($extension);
$uploadID = $fileID.'.'.$extension;
if (move_uploaded_file($_FILES['Filedata']['tmp_name'], "images/".$uploadID))
{
     echo "OK";
}
else
{
     echo "ERROR";
}
?>
l_tilter0405 is offline   Reply With Quote
Old 05-10-2012, 12:09 PM   #2
solisarg
Senior Member
 
solisarg's Avatar
 
Join Date: Mar 2003
Location: Buenos Aires, Argentina
Posts: 496
Default

Sure, use different instances of FileReference class, store in an array and walk trough it calling upload on each one.

Jorge
solisarg is offline   Reply With Quote
Old 05-10-2012, 01:32 PM   #3
l_tilter0405
Registered User
 
Join Date: Apr 2012
Posts: 8
Default

Hi Solisarg, thank you so much for replying - so where i have:

Code:
var imageFile:FileReference;
I would have:

Code:
var imageFile1:FileReference;
var imageFile2:FileReference;
var imageFile3:FileReference;
and so on....
then add them into an array:
Code:
var imageArray:Array = [imageFile1, imageFile2, imageFile3];
then finally loop through and upload for each:
Code:
var len:int = imageArray.length;
for (var i:int = 0; i < len; i++) {
    imageFile[i].upload(urlRequest);
}
Is that correct? The only thing i'm struggling to understand is then how do i know when all uploads are complete? So have an event listener for all in the same way as i have for the single upload:

Code:
function onUploadComplete(event:Event):void {
l_tilter0405 is offline   Reply With Quote
Old 05-10-2012, 01:47 PM   #4
solisarg
Senior Member
 
solisarg's Avatar
 
Join Date: Mar 2003
Location: Buenos Aires, Argentina
Posts: 496
Default

Nop, you can't loop and call upload in a single frame, instead you need a queue: call on the first, wait for the callback, pop the element from the array and continue with the next and so on until finish, if not all files will mess it up

Jorge
solisarg is offline   Reply With Quote
Old 05-10-2012, 01:59 PM   #5
l_tilter0405
Registered User
 
Join Date: Apr 2012
Posts: 8
Default

Sorry solisarg, what is the easiest or best coded way of setting up the queue?

All i can think of is to have 25 different event listeners and upload functions (as there are possibly up to 25 uploads) for the UploadComplete listeners:

Code:
function onUploadComplete1(event:Event):void {
	upload_status_txt.text='upload 1 complete';
	imageFile.removeEventListener(ProgressEvent.PROGRESS, onProgress);
	imageFile.removeEventListener(DataEvent.UPLOAD_COMPLETE_DATA,onUploadComplete);
	UploadprogressBar.visible=false;
        startUpload2();
}

function startUpload2() {
       repeat and set event listener - on UploadComplete2..
}

and so on...
l_tilter0405 is offline   Reply With Quote
Old 05-10-2012, 02:04 PM   #6
solisarg
Senior Member
 
solisarg's Avatar
 
Join Date: Mar 2003
Location: Buenos Aires, Argentina
Posts: 496
Default

Consider something like this
ActionScript Code:
var count:int = 0; var imageArray:Array = [imageFile1, imageFile2, imageFile3]; imageFile[count].(DataEvent.UPLOAD_COMPLETE_DATA,onUploadComplete); imageFile[count++].upload(urlRequest); function onUploadComplete1(event:Event):void {     upload_status_txt.text='upload '+count+' complete'; imageFile[count].removeEventListener(DataEvent.UPLOAD_COMPLETE_DATA,onUploadComplete);         if(count<imageArray.length) imageFile[++count].upload(urlRequest);         else upload_status_txt.text='All files loaded' }

Jorge
solisarg is offline   Reply With Quote
Old 05-10-2012, 02:42 PM   #7
l_tilter0405
Registered User
 
Join Date: Apr 2012
Posts: 8
Default

Thank you very much Jorge,

Having placed your code like below:

Code:
// Upload Button Function.
upload_btn.addEventListener(MouseEvent.CLICK, onupload_btnClicked);

function onupload_btnClicked(event:MouseEvent):void {
	imageFile[count].addEventListener(DataEvent.UPLOAD_COMPLETE_DATA,onUploadComplete);
	imageFile[count++].upload(urlRequest);
}

// Upload File Completed Function.
function onUploadComplete(event:Event):void {
	
	upload_status_txt.text='upload '+count+' complete';
	imageArray[count].removeEventListener(DataEvent.UPLOAD_COMPLETE_DATA,onUploadComplete);
    
	if(count<imageArray.length) {
		imageArray[++count].upload(urlRequest);
	}
    else {
		upload_status_txt.text='All files loaded';
	}
	
}
I get the following compile errors (relating to the first 2 lines of the 'onupload_btnClicked' function:

Code:
Scene 1, Layer 'Layer 1', Frame 1, Line 180	1120: Access of undefined property imageFile.
l_tilter0405 is offline   Reply With Quote
Old 05-10-2012, 02:45 PM   #8
solisarg
Senior Member
 
solisarg's Avatar
 
Join Date: Mar 2003
Location: Buenos Aires, Argentina
Posts: 496
Default

Yep, should be imageArray instead if imageFile

Jorge
solisarg is offline   Reply With Quote
Old 05-10-2012, 02:49 PM   #9
l_tilter0405
Registered User
 
Join Date: Apr 2012
Posts: 8
Default

I thought that but then changing it to imageArray results in that function throwing up the error:

Code:
TypeError: Error #1009: Cannot access a property or method of a null object reference.
	at FileReference_Multiple_fla::MainTimeline/onupload_btnClicked()
l_tilter0405 is offline   Reply With Quote
Old 05-10-2012, 02:57 PM   #10
solisarg
Senior Member
 
solisarg's Avatar
 
Join Date: Mar 2003
Location: Buenos Aires, Argentina
Posts: 496
Default

This should be somewhere

var imageArray:Array = [imageFile1, imageFile2, imageFile3];

Jorge
solisarg is offline   Reply With Quote
Reply


Thread Tools
Display Modes Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 12:28 PM.

///
Follow actionscriptorg on Twitter

 


Powered by vBulletin® Version 3.8.5
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
Ad Management plugin by RedTyger
Copyright 2000-2013 ActionScript.org. All Rights Reserved.
Your use of this site is subject to our Privacy Policy and Terms of Use.