Angel Medrano | Web (*) Developer

All sorts of webby goodness!

« Back to blog

FileReference.upload and some extra _POST variables

So, I'm working on an AIR CMS (personal hobby) and I've spent the day trying to do the following:

- Use AIR to grab an image from the users computer (.browse)
- Upload it using the FileReference.upload method
- Resize it with on the server to the appropriate dimensions
- Also, Im gonna wanna put a reference to the image on a database along with descriptions etc.

So here's what ive come up with

import flash.filesystem.*;

var file:File = new File();

file.addEventListener(Event.SELECT, onChoose); // this listens for when the user chooses a file.

btn.addEventListener(MouseEvent.CLICK, onMClick); // good ole fashioned mouseEvent

function onMClick (e:MouseEvent):void
{
// open the browse dialogue you can also filter as a second param
file.browseForOpen("Open");

// remove the original click handler cause i want to use the same btn for uploading
btn.removeEventListener(MouseEvent.CLICK, onMClick);
}


function onChoose (e:Event):void
{
btn.addEventListener(MouseEvent.CLICK, onUpload);// add the new MouseEvent when the user selects the file
}

function onUpload (e:MouseEvent):void
{

// location of your upload script
var url:URLRequest = new URLRequest("http://localhost:8888/mysite/upload.php");

// set URLRequest.method as POST so you can grab some extra vars with your php script
url.method = URLRequestMethod.POST;

// these are the variables i want to send along with my upload request
var vars:URLVariables = new URLVariables();
vars.tester = "this is a variable"; // you could add a whole slu of these and take those into the db (if you dont know how to do this, just google it.)

// tell the urlRequest to use these vars as well
url.data = vars;

// go ahead and upload
file.upload(url);


// listening to upload events
file.addEventListener(Event.COMPLETE, onComplete);
file.addEventListener(IOErrorEvent.IO_ERROR, onIOError);
file.addEventListener(ProgressEvent.PROGRESS, onUploadProg);

}


function onComplete (e:Event):void
{
trace("completed");
}

function onUploadProg (e:ProgressEvent)
{
trace("Prog");
}


function onIOError (e:IOErrorEvent):void
{
trace(e + "no berries");
}

/////////////////////////////////////////////// Now the PHP script/////////////////////////////////////////////////////////////////////

Im using PHP5(dont know how big of a difference that makes.

<?php

//create the directory if doesn't exists (should have write permissons)
if(!is_dir("./uploads")) mkdir("./uploads", 0755);

//move the uploaded file
$targetPath = 'uploads/';
$newName = $targetPath .basename( $_FILES['Filedata']['name']);
$string = $_POST['tester']; // grabs those extra vars


// actually upload the file with a new name
if(move_uploaded_file($_FILES['Filedata']['tmp_name'], $newName)){

// gives you with of the uploaded file
list($width, $height) = getimagesize($newName);

echo $width . $height;

$im = imagecreatetruecolor(300, 300);
$source = imagecreatefromjpeg($newName);
imagecopyresampled($im, $source, 0, 0, 0, 0, 300, 300, $width, $height);

// Save the image as 'wwhateever.jpg" or in this case just rename it the same.
imagejpeg($im, $newName);

// Free up memory
imagedestroy($im);

// Create a blank image and add some text to see our variable.
$im2 = imagecreatetruecolor(120, 20);
$text_color = imagecolorallocate($im2, 233, 14, 91);
imagestring($im2, 1, 5, 5, $string, $text_color);

// Save the image as 'new.jpg'
imagejpeg($im2, 'uploads/new.jpg');

// Free up memory
imagedestroy($im2);

}


?>

Thats it!
Hope that helps someone, I owe my whole career to people posting useful snippets to their blogs.
- happy coding

Mar 09, 2010
F Majakovskij said...
thanks a lot!