Flash File Uploader

Uploader Screenshot
Flash File Uploader V3.3 (Alphabetical Listing)
Looking for a Flash File Uploader that allows you to see analphabetical listing of uploaded files? Click here.

I was getting tired of upload scripts timing out in Flash and talked with Mike a little about creating an AJAX uploader. Unfortunately, AJAX has a difficult time updating a progress meter while an upload is running and it still cannot prevent browser requests from timing out on some servers. Granted, you still can use AJAX to do this and I’d recommend reading up on a number of online tutorials that offer solutions. However, up until the advent of Flash’s FileReference Object, programmers had to rely on server-side Perl scripts to manage these uploads and as Zeh so eloquently put it, “I love Flash’s upload. It’s so much better than the extremely crap HTML upload.” Using the new FileReference Object, I put together this handy-dandy Flash File Uploader to manage files with variable file limits. I have to be honest and say that the idea came from YouTube‘s “Upload Video” feature and may owe a little credit to them. The FLA is perfectly skinnable and can easily be adapted to restrict to filetypes (Images, Text, Audio, Video, etc.). This one is pretty standard as I’ll be creating the limitations on a per-use basis, depending on the application. Also, you’ll still need to have PHP running on your server and have access to change file/folder permissions, specifically the repository for uploaded files (default: /files/) I should also mention that NO security scripting has been included in the PHP file. upload.php simply copies the newly-uploaded file to a directory without performing any virus protection at all. So here’s my disclaimer.

Disclaimer: If you intend to use this script, you should be wary of people uploading viruses to your server. By downloading these source files, you agree to indemnify me of any damage from malicious attacks.

That being said, here’s what you’re getting:

1. uploader.fla Fully-skinnable Flash Source file (FLA) that enables browsing to a computer, selecting the file to be uploaded, initiating the upload and watching a progress meter, and completion. 2. upload.php Simply PHP file for moving the newly-uploaded file to a specific directory (default: /files/) 3. index.html HTML page which includes (by way of the Deconcept SWFObject) the uploader.swf, and parameters for php handling and file size limit. 4. SWFObject I included the JS file for your convenience. If you have questions about how to use the SWFObject, please see my previous tutorial, Activating an ActiveX Control’s Interface through Javascript. 5. Files Directory This is an empty placeholder directory for your uploaded-file storage. Make sure it is writeable!

This Page can help you to limit types of files that are being uploaded and I urge you to refer to your favorite PHP tutorial site for instructions on adding security to the upload.php script. Restrict to File Type (hard-coded): Here’s an easy upgrade to the above Flash File Uploader if you’d like to restrict uploads to specific file types (in this example, images and text files).After importing the FileReference Object:

import flash.net.FileReference;

Enter the following code to create a file type array:

var allTypes:Array = new Array();
var imageTypes:Object = new Object();
imageTypes.description = "Images (*.jpg, *.jpeg, *.gif, *.png)";
imageTypes.extension = "*.jpg; *.jpeg; *.gif; *.png";
allTypes.push(imageTypes);var textTypes:Object = new Object();
textTypes.description = "Text Files (*.txt, *.rtf)";
 
textTypes.extension = "*.txt;*.rtf";
 
allTypes.push(textTypes);

Then, simply modify the browse method

file.browse();

to only use the new Array’s file types:

file.browse(allTypes);

Restrict to File Type (dynamic): Now let’s make it a bit more interesting. Add the below variable to your SWFObject:

fo.addVariable("types", "image|text|audio|video");

Remove the hard-coded AllTypes array (above) and enter this instead:

if (_root.types != undefined) {
var typesArray = _root.types.split("|");
var allTypes:Array = new Array();
var len:Number = typesArray.length;
for (var i:Number = len; --i>=0; )
    switch (typesArray[i]) {
    case "image" :
        var imageTypes:Object = new Object();
        imageTypes.description = "Images (*.jpg, *.jpeg, *.gif, *.png)";
        imageTypes.extension = "*.jpg; *.jpeg; *.gif; *.png";
        allTypes.push(imageTypes);
        break;
    case "text" :
        var textTypes:Object = new Object();
        textTypes.description = "Text Files (*.txt, *.rtf)";
        textTypes.extension = "*.txt;*.rtf";
        allTypes.push(textTypes);
        break;
    case "video" :
        var videoTypes:Object = new Object();
        videoTypes.description = "Video Files (*.avi, *.flv, *.mov, *.wmv)";
        videoTypes.extension = "*.avi;*.flv;*.mov;*.wmv";
        allTypes.push(videoTypes);
        break;
     case "audio" :
        var audioTypes:Object = new Object();
        audioTypes.description = "Audio Files (*.aif, *.mp3, *.wav, *.wma)";
        audioTypes.extension = "*.aif;*.mp3;*.wav;*.wma";
        allTypes.push(audioTypes);
        break;
    }
}
}

Down by the browse statement, change the browse method to this:

browse.onRelease = function() {
    if (allTypes != undefined) {
        file.browse(allTypes);
    } else {
        file.browse();
    }
;

Republish your Flash file and experiment with changing the variable in your SWFObject to change the file type restrictions. Show only images:

fo.addVariable("types", "image");

Show only text files:

fo.addVariable("types", "text");

Show only video files:

fo.addVariable("types", "video");

Show only audio files:

fo.addVariable("types", "audio");

Show all:

fo.addVariable("types", "image|text|audio|video");

Pretty nifty, eh? For questions, feel free to submit a comment. Enjoy!

May 30, 2008 – Added script to Flash and PHP to stripslashes which in previous versions broke Javascript functions.
August 18, 2007 – Suppressed the “A script in this movie is causing Flash Player to run slowly” browser alert (Thanks to Matt Kull, Zeh and Pete).
June 17, 2007 – Mike updated the PHP files to enable caching of auto-generated thumbnails, preview mode (prior to upload) and fixed some security issues.
Download Flash Uploader v2.0 (ZIP) Includes: All the Flash and PHP project files with step-by-step instructions for installation on your site.
Download Flash Uploader v3.0 – Custom Dirs (RAR) Includes: All the Flash and PHP project files with step-by-step instructions for installation on your site.
Download Flash Uploader v3.1 – Details Bug Fix (RAR) Includes: Complete FLA, PHP and source files with options for Custom Dirs, File Name Rewrite.
Download Flash Uploader v3.2 – Allow All Filetypes (RAR) Includes: FLA, PHP and source with Custom Dirs, File Name Rewrite, int’l characters and “Allow All”.

Download Flash Uploader v3.3 – Alphabetical Results (RAR) Includes: Complete FLA, PHP and source files with Custom Dirs, File Name Rewrite, international characters, “Allow All Filetypes” and Alphabetical File Listing.

13 Comments
  1. Websites tagged "techniques" on Postsaver says:

    [...] Building brand agility thro’ customer insights and integrated … saved by raizen0212009-01-15 – [d]online » Flash File Uploader saved by awa12009-01-06 – Optimize Your Online Visibility saved by latsilva2008-12-23 – DX Mode on [...]

  2. [...] years back, I’ve gotten dozens of requests for this feature. As such, I’ve decided that my disclaimer for downloading the uploader should adequately cover me from any litigation and wrote the feature [...]

  3. PHP flash uploader - can't get it working under IIS - SitePoint Forums says:

    [...] that works in this new server. The first uploader I tried to use is the one I have used before: Flash File Uploader – [d]online But I also tried others like: Upload large files using Flash Uploader – SOLMETRA I don't have a [...]

  4. meeran says:

    Wow! Really Works, but Why is it telling me to buy it?
    Please give me one like this, without buying it. Thanks!

  5. Don says:

    No, you don’t have to buy it. Just click one of the download links, above. It’s free.

  6. Martin says:

    I like this uploader. But is it possible to upload more files by one upload?

  7. Don says:

    Unfortunately, I never built a multi-file uploader and I’ve long since abandoned this project in favor of non-Flash versions. Sorry.

  8. David nieto says:

    excellent and very good, ¿how you can organize uploaded files in alphabetical order? thanks

  9. Don says:

    By default, the directory structure should be alphabetical ascending, if you’re using PHP to list the contents of the uploads folder: http://php.net/manual/en/function.scandir.php

    If you like, ping me here and I’ll explain further: http://www.era404.com/contact/

  10. David nieto says:

    Ping did, http://www.era404.com/contact/ I have to send the contact form? for the explanation?

  11. Jim Layton says:

    Hi Don,
    What if you wanted to display the direct link to the file instead of just the file name or even better a copy link to clipboard feature?

  12. Don says:

    Look for the line that says:

    …and modify it so that it says something like:

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>