GO TO AS: MAIN FOR YOUR DAILY NEED OF ACTIONSCRIPT!!
Hi there! I present to you another tutorial by Khao : File Upload
Liam gave code for file upload and download withouth really explaining at all or even understanding what he was doing, so I decided to redo the tutorial (asked him permission) but this time only on Uploading (since downloading was easy)
So yeah, what is File Uploading?
It means that with flash you can have the user browse a file on his computer and upload it to your server. (for example uploading a picture to show in a profile)
I'll write this tutorial in 2 parts, the first part is the flash side, the second part with be the PHP side and server-side configuration for this script to work.
I am hosting an example of this on my website, you can upload JPG files up to 40kb and see them on my server. (click me)
Ok so, firstly, the Flash side of this tutorial!
-----FLASH-----
Firstly, we need to add the FileReference class to the flash, so it can use files and then, create a FileReference object
import flash.net.FileReference;
var fileref:FileReference = new FileReference();
Now I have the variable fileref wich is a FileReference object. It is with this object that we will browse, but not upload.
We now need to add a listener to this object so we know when do we have a file and what to do. (see AS: Listeners by F13)
var listener:Object = new Object();
Now we have a listener, we need to make him do actions when certain events happen. Firstly, when the user selects a file
listener.onSelect = function(file:FileReference) {
FileName = file.name;
file.upload("upload.php");
};
This will make it so as soon as the user loads a file, the variable FileName will save the file name(ex: "Picture.jpg") and it will send it to upload.php, the script that will save the file on the server.
Another listener I will add for this is the onComplete, called when the file has been sent
listener.onComplete = function() {
getURL(FileName,"_blank");
};
Assuming that your script saves the file in the same folder that your .swf is in, this will open the file when it has uploaded completely.
fileref.addListener(listener);
this little script here make sure that the listening if watching events on our fileref object, very important.
And now the script that makes the user browse for a file
fileref.browse([{description:"JPEG Pictures Only", extension:"*.jpg"}])
The description is the text that is showed when you upload, and the extension is the extension allowed for uploading. You can select more than 1 type by seperating with ;
Ex: extension:"*.jpg;*.gif;*.png"
Good, now you've got the very basic of file uploading, but no server-side yet! Let's get into the making of the PHP file
-----PHP-----
Create a new file called uploader.php and place it in the same directory as your .swf
Put this into your php file
<?php
move_uploaded_file($_FILES['Filedata']['tm
p_name'], $_FILES['Filedata']['name'])
?>
again this is a very basic way of doing it, basically just take the file and put it into the folder without veryfind for anything (so its a bit unsafe).
the move_uploaded_file(temp,target) function is the one that copies the file into the directory. the temp parameter is the temporary location and name of the file, wich you can fin with $_FILES['Filedata']['tmp_name'], and the target is the path where the file will be saved. For this example I just put the filename, no subfolder.
But wait, I guess it's not working right?
well you have to change the folder's permission to read and write (777) so the php can save in the folder.
Well now you should have a VERY basic form of file uploading, but should still work (unless I made some dumb errors, wich wouldn't surprise me at all)
Now here are all the other things you could need to improve your file upload.
-----FILEREFERENCE OBJECT-----
Here are all the other events you can have on a FileReference object and the properties so you can make your scripts better than the one I gave you ;)
onProgress = function(fileRef:FileReference, bytesLoaded:Number, bytesTotal:Number) {}
Called everytime the flash is updated about the status of the upload, giving the number of bytes loaded and bytes total for the file being uploaded (or downloaded, but not covered in this tutorial)
onComplete = function(fileRef:FileReference) {}
Called when the file uploaded or downloaded has finished.
onOpen = function(fileRef:FileReference) {}
Called when the file uploading or downloading begins.
onSelect = function(fileRef:FileReference) {}
Happens when the user selects a file after doing a FileReference.browse()
onCancel = function(fileRef:FileReference) {}
Called when the user cancels the file uploading/downloading.
Now here are a few properties that the fileRef object that is invoked in all these events has.
fileRef.name
fileRed.size
fileRef.type
No need for a lof of explanation on this right? The name of the file (with extension), the size in bytes and the type.
Here are some functions you can call with your FileReference object
browse([typelist:Array])
opens the browse window, as I explained a bit earlier, you use an object inside an array to define what kind of files to upload and wich text to show.
Ex: fileref.browse([{description:"JPEG Pictures Only", extension:"*.jpg"}]);
cancel()
cancels the uploading or downloading of a file.
download(url:String, [defaultFileName:String])
downloads a file from a URL, I don't know whats the defaultFileName for and I won't bother looking for it since I said I wasn't going to cover downloading
upload(url:String)
Uploads the file at the URL.
addListener(listener:Object)
obviously, add a listener object on the FileReference object.
IT'S FINISHED!!!
Hope you learned a lot! Have some fun with my File Uploader if you want :)
And a few other things for you cause I love you all, the .fla and .php files for you to download.
.FLA
.PHP (in a .txt file)
No more chars LOLLLL
