Be a Supporter!

AS: File Upload

  • 3,032 Views
  • 23 Replies
New Topic Respond to this Topic
Khao
Khao
  • Member since: Sep. 20, 2003
  • Offline.
Forum Stats
Member
Level 20
Blank Slate
AS: File Upload Jan. 10th, 2006 @ 06:35 PM Reply

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

AS: File Upload

hashbrown
hashbrown
  • Member since: Jul. 7, 2005
  • Offline.
Forum Stats
Member
Level 16
Blank Slate
Response to AS: File Upload Jan. 10th, 2006 @ 06:43 PM Reply

thats cool, i uplaoded stars :O


BBS Signature
Thomas
Thomas
  • Member since: Feb. 14, 2005
  • Offline.
Forum Stats
Member
Level 13
Musician
Response to AS: File Upload Jan. 10th, 2006 @ 07:10 PM Reply

Wow,that's great.

Looks like yet another AS tutorial to add to Main!


wat
a compessor wil raise the volume while lowering the db - chronamut

DFox
DFox
  • Member since: Aug. 9, 2003
  • Offline.
Forum Stats
Member
Level 30
Blank Slate
Response to AS: File Upload Jan. 10th, 2006 @ 07:15 PM Reply

This is one of my favorite AS: Main tutorials so far. Very nice work.


BBS Signature
Khao
Khao
  • Member since: Sep. 20, 2003
  • Offline.
Forum Stats
Member
Level 20
Blank Slate
Response to AS: File Upload Jan. 10th, 2006 @ 07:17 PM Reply

At 1/10/06 07:15 PM, GamesCool wrote: This is one of my favorite AS: Main tutorials so far. Very nice work.

Wow thanks a lot GamesCool! :P

hash and thomas too :)
Khao
Khao
  • Member since: Sep. 20, 2003
  • Offline.
Forum Stats
Member
Level 20
Blank Slate
Response to AS: File Upload Jan. 10th, 2006 @ 09:49 PM Reply

Lol at the few pics you guys uploaded on my server ;)

Rantzien
Rantzien
  • Member since: Jan. 27, 2005
  • Offline.
Forum Stats
Member
Level 15
Blank Slate
Response to AS: File Upload Jan. 11th, 2006 @ 03:21 AM Reply

Cool. I read it briefly, I'll add it to my "To read closely when I need it"-list. =)

Let me get one thing right, I've understood that fileReference doesn't provide a method to use the file in the swf, only to transfer files between a server and a computer. Is that correct?


BBS Signature
Khao
Khao
  • Member since: Sep. 20, 2003
  • Offline.
Forum Stats
Member
Level 20
Blank Slate
Response to AS: File Upload Jan. 11th, 2006 @ 11:52 AM Reply

At 1/11/06 03:21 AM, Rantzien wrote:
Let me get one thing right, I've understood that fileReference doesn't provide a method to use the file in the swf, only to transfer files between a server and a computer. Is that correct?

yes it is!

Rantzien
Rantzien
  • Member since: Jan. 27, 2005
  • Offline.
Forum Stats
Member
Level 15
Blank Slate
Response to AS: File Upload Jan. 11th, 2006 @ 11:59 AM Reply

At 1/11/06 11:52 AM, Khao wrote: yes it is!

Ok then. Thanks =)


BBS Signature
authorblues
authorblues
  • Member since: Jun. 21, 2005
  • Offline.
Forum Stats
Member
Level 12
Blank Slate
Response to AS: File Upload Jan. 11th, 2006 @ 12:03 PM Reply

At 1/11/06 11:52 AM, Khao wrote: yes it is!

so aside from overwriting the same file and accessing it again, what is the course of action you should take to use a file youve just uploaded. is there ANY way to reference its url, aside from just knowing it inherently?

loving the sig, by the way, rantzien

BBS Signature
Khao
Khao
  • Member since: Sep. 20, 2003
  • Offline.
Forum Stats
Member
Level 20
Blank Slate
Response to AS: File Upload Jan. 11th, 2006 @ 12:13 PM Reply

At 1/11/06 12:03 PM, authorblues wrote:
so aside from overwriting the same file and accessing it again, what is the course of action you should take to use a file youve just uploaded. is there ANY way to reference its url, aside from just knowing it inherently?

well if you've looked at my .fla you will see that I give to my files names that are all random numbers from 1 to 100(actually 0 to 99), so to get that file I save the file with the name I want I made a bit of PHP, and instead of calling "upload.php" I call "upload.php?name="+NameVariable
and then add in the php:
$name = $_GET['name'];
and I save the file with that name
and then in the flash you could upload the image with
loadMovie(FileName, targetMovieClip)
or if you save the files in a folder
loadMovie("SubFolder/"+FileName, targetMovieClip)

just take a loot at the PHP and .fla I gave it will help you understand more

authorblues
authorblues
  • Member since: Jun. 21, 2005
  • Offline.
Forum Stats
Member
Level 12
Blank Slate
Response to AS: File Upload Jan. 11th, 2006 @ 12:16 PM Reply

At 1/11/06 12:13 PM, Khao wrote: just take a loot at the PHP and .fla I gave it will help you understand more

cute. i understand THAT method. i was actually just wondering if the fileReference class had any prebuilt methods that would solve that problem without a workaround (despite the fact that the workaround is incredibly simple)


BBS Signature
shazwoogle
shazwoogle
  • Member since: Sep. 27, 2004
  • Offline.
Forum Stats
Member
Level 11
Blank Slate
Response to AS: File Upload Jan. 12th, 2006 @ 06:31 PM Reply

http://blebla7.hollosite.com/

somthing i made a lil while ago thinking of making it a real site

Khao
Khao
  • Member since: Sep. 20, 2003
  • Offline.
Forum Stats
Member
Level 20
Blank Slate
Response to AS: File Upload Jan. 12th, 2006 @ 06:33 PM Reply

At 1/12/06 06:31 PM, shazwoogle wrote: http://blebla7.hollosite.com/

somthing i made a lil while ago thinking of making it a real site

what the?

shazwoogle
shazwoogle
  • Member since: Sep. 27, 2004
  • Offline.
Forum Stats
Member
Level 11
Blank Slate
Response to AS: File Upload Jan. 13th, 2006 @ 09:17 PM Reply

At 1/12/06 06:33 PM, Khao wrote: what the?

ya flash uploading, renames (well php renames) but ya what ya think

hashbrown
hashbrown
  • Member since: Jul. 7, 2005
  • Offline.
Forum Stats
Member
Level 16
Blank Slate
Response to AS: File Upload Jan. 13th, 2006 @ 09:50 PM Reply

At 1/13/06 09:17 PM, shazwoogle wrote:
At 1/12/06 06:33 PM, Khao wrote: what the?
ya flash uploading, renames (well php renames) but ya what ya think

it works,
http://blebla7.hollo..h=550&height=400


BBS Signature
Khao
Khao
  • Member since: Sep. 20, 2003
  • Offline.
Forum Stats
Member
Level 20
Blank Slate
Response to AS: File Upload Jan. 13th, 2006 @ 11:58 PM Reply

At 1/13/06 09:17 PM, shazwoogle wrote:
At 1/12/06 06:33 PM, Khao wrote: what the?
ya flash uploading, renames (well php renames) but ya what ya think

k, cool, last time i tryed to look the site wouldn't open lol

shazwoogle
shazwoogle
  • Member since: Sep. 27, 2004
  • Offline.
Forum Stats
Member
Level 11
Blank Slate
Response to AS: File Upload Jan. 20th, 2006 @ 09:57 PM Reply

At 1/13/06 11:58 PM, Khao wrote: k, cool, last time i tryed to look the site wouldn't open lol

yeah it does that because its on a free host in under 2 days it should be up on a payed host

eval
eval
  • Member since: Sep. 28, 2006
  • Offline.
Forum Stats
Member
Level 01
Blank Slate
Response to AS: File Upload Sep. 28th, 2006 @ 09:48 AM Reply

How can I can upload an image that i get from loadMovie.

Ex:.
loadMovie("http://www.blizzard.com/images/
war3/wallpaper/mannaroth/mannaroth-1600x.j
pg",mcImage);
and upload the mcImage without interaction of the user.

Thanks in advance.
Eric

GuyWithHisComp
GuyWithHisComp
  • Member since: Nov. 10, 2005
  • Offline.
Forum Stats
Member
Level 28
Blank Slate
Response to AS: File Upload Sep. 28th, 2006 @ 11:23 AM Reply

oadMovie("http://www.blizzard.com/images/
war3/wallpaper/mannaroth/mannaroth-1600x.j
pg",mcImage);

and call a movieclip mcImage.


BBS Signature
eval
eval
  • Member since: Sep. 28, 2006
  • Offline.
Forum Stats
Member
Level 01
Blank Slate
Response to AS: File Upload Sep. 28th, 2006 @ 11:34 AM Reply

Thanks Victor, but, how I link the mcImage to fileRef.

Eric

GuyWithHisComp
GuyWithHisComp
  • Member since: Nov. 10, 2005
  • Offline.
Forum Stats
Member
Level 28
Blank Slate
Response to AS: File Upload Sep. 28th, 2006 @ 11:37 AM Reply

At 9/28/06 11:34 AM, eval wrote: Thanks Victor, but, how I link the mcImage to fileRef.

Eric

You don't need to.
Just highlight the MovieClip and open properties tab.
Chane <Instance Name> to mcImage.


BBS Signature
eval
eval
  • Member since: Sep. 28, 2006
  • Offline.
Forum Stats
Member
Level 01
Blank Slate
Response to AS: File Upload Sep. 28th, 2006 @ 02:56 PM Reply

Viktor, I make it. But my doubts is: I need upload (with FileReference) to a server an image (mcImage) that I get with loadMovie .

I just want define mcImage in fileRef, instead to use fileRef.browse to select an image . But I don't know how i say to fileRef that mcImage is my file.

Eric

FlukeDude
FlukeDude
  • Member since: Sep. 18, 2006
  • Offline.
Forum Stats
Member
Level 14
Blank Slate
Response to AS: File Upload May. 31st, 2008 @ 04:23 PM Reply

I'm having trouble with this. I'm using a free host to test this out, and I'm a little confused on the PHP part. On my control panel I have the swf and PHP files, do I need a folder with them? They're inside a folder named "upload" which I made it so that you can read and write 777. Do I then need a folder within "upload" and what should it be called because at the moment it's not working. :/


They used to call me souled...