uploading images to server

[ugo_a_go_go]

I'm trying to upload images to a server through flash 8 professional. I am familiar with the file upload API feature in actionscript but unsure what to do with the server script to handle the data. Preferably I would like to use ASP since this is the only server script I am familiar with.

Any advice or pointers would be greatly appreciated.

[sunny13]

Download the source available at http://www.joshbuhler.com/2005/09/14...now-available/ ... follow the instructions at site and use the file....hope this should work

[summerice]

http://previous.emllabs.com/article.php?articleId=121

The PHP Upload Script
1 Create a new PHP file, save it as upload.php.
2 Paste the following script inside:

<?php
if ($_FILES['Filedata']['name']) {
   $uploadDir = "images/";
   $uploadFile = $uploadDir . basename($_FILES['Filedata']['name']);
   move_uploaded_file($_FILES['Filedata']['tmp_name'], $uploadFile);
}
?>

This page is called under the pretense that we are passing it a file to upload that has been stored in the browser's temp directory. First it checks to see whether the file is there by testing the Boolean value of Filedata. Then we define the directory to upload to and define the file to upload. Finally, we move the file from the browser's temp directory to our directory on the server.

The Flash Interface File
1 Create a new Flash file and save it as "fileUpload.fla".
2 Create a new layer in the timeline. Rename the top layer actions and rename the bottom layer content.
3 In the content layer, create a new rectangle, make it a movie clip named rect_mc, and be sure that it is big enough to hold the following:

• Textfield
  
  • Instance name - name_txt
• Button Component
  
  • Instance name - browse_butn
  • Lable - Browsebutn
• Button Component
  
  • Instance name - upload_butn
  • Lable - upload

4 In the Actions layer, in frame 1, paste the following code:

//import the FileReference Object
import flash.net.FileReference;
//initial settings
upload_butn.enabled = false;
//the FileReference object
var file_fr:FileReference = new FileReference();
//object for listening to for FileReference events
var list_obj:Object = new Object();
list_obj.onSelect = function(){
   upload_butn.enabled = true;
   name_txt.text = file_fr.name;
}
list_obj.onComplete = function(){
   name_txt.text = "All Done";
   rec_mc.clear();
   upload_butn.enabled = false;
}
list_obj.onProgress = function (bytesTotal, bytesLoaded){
   var percent = bytesLoaded/file_fr.size;
   drawRec(percent);
}
//if a user selects cancel
list_obj.onCancel = function(){
   name_txt.text = "Cancel was selected";
}
//if there is an IO error
list_obj.onIOError = function(fileRef){
   name_txt.text = "IO error with " + fileRef.name;
}
//security error problem
list_obj.onSecurityError = function(fileRef, error){
   name_txt.text = "Security error with " + fileRef.name + ":" + error;
}
//httpError
list_obj.onHTTPError = function(fileRef:FileReference, error:Number){
   name_txt.text += "HTTP error: with " + fileRef.name + ":error #" + error;
}
//attach the listener
file_fr.addListener(list_obj);
//the event for the browse button
   browse_butn.clickHandler = function(){
   file_fr.browse([{description: "JPEGs", extension: "*.JPG;*.jpg"}]);
}
//the event for the upload button
upload_butn.clickHandler = function(){
   file_fr.upload("upload.php");
   rec_mc.fillColor = Math.random()*0x1000000;
}
//drawing the rectangle
function drawRec (per){
   rec_mc.clear();
   rec_mc.lineStyle(0);
   rec_mc.beginFill(rec_mc.fillColor, 70);
   rec_mc.lineTo(per*rec_mc._width, 0);
   rec_mc.lineT o(per*rec_mc._width, rec_mc._height);
   rec_mc.lineTo(0, 30);
   rec_mc.lineTo(0,0);
   rec_mc.endFill();

In the preceding code we do quite a few things. First we import the fileReference object so that we can access the file system. Then we create a new instance of this object named file_fr. Then we create list_obj, which we will use as a listener for file_fr. Now the majority of the events (onSelect, onComplete, and so on) should be self-explanatory, but some that you may not recognize are the error-checking events. These are built-in events and allow for error checking against Security, IO, and HTTP errors that may arise. Then we attach the click handlers to the browser button, and limit the filetypes to JPEGs. The upload button click handler used the upload method to pass our file_fr object to the upload.php page. Finally, we added a little progress bar animation that used the drawing API to fill the rectangle.

5 In the same directory as your published files, create a directory named "images" with full read and write permissions for public users.



If you followed the instructions correctly, your file should allow you to access JPGs and upload them to the images directory on your server.

[ugo_a_go_go]

Awesome!

Many thanks

[ugo_a_go_go]

I'm now using the solution posted by summerice and it works great. As a follow up I'm curious as to how secure the setup is. Though I know the flash end of the script will restrict the filetypes uploaded, is it possble for someone to by-pass it and upload a malicious script/program?

Also I'd like to restrict the size of the files being uploaded. How is it best to do that.

Thanking you!

[Musicman]

Hi,

one could create a html form to upload rubbish to your server.
The script already uses basename to get rid of slashes that could be used to put data into a wrong folder; it should also ensure that the name does not create problems later (only certain printing characters from the ascii map), and it should certainly refuse to save php files

if(eregi('\.php', $_FILES['Filedata']['name']))
die("do not upload php");
if($_FILES['Filedata']['size'] > 100000)
die("the image is too big");

Musicman

[Threebrain]

This is AMAZING!! I've been trying to do a flash image upload all night and it was making me hate computers so much and this one not only doesn't need to goto a php page or have a popUp either! Works right in flash! I just made an images folder in the same folder and it works! hahaha I love you hugs

Now I just gotta get that file reference back in flash so the flash can load the image in there but I think i can do that

[Musicman]

Hi,

and this one not only doesn't need to goto a php page or have a popUp either!

There is one small but annoying problem: macromedia/adobe so far have not released flash player 8 for all supported systems

Musicman

[Threebrain]

yeah but the way in seemlessly installs now is so easy that I figure I'll code for it cause in a matter of months everybody will have player8.

Do you know offhand how to get the filename value? I'm trying to upload the uploaded image back to flash into a movieClip. I've been trying to make a function like this:

function getImage(){
	if(container._width < 10){
		trace("no movie loaded");
                //The filenamec variable in the next line is just for debuggin purposes
		filenamec = fileRef.name;
		_root.cover.container.loadMovie("/images/" + fileRef.name);
	}
}

But it don't work at all. the checker filenamec variable comes back "undefined" so im' doing something stupid