digitarald - Web Craftsman Harald Kirschner - Internet Consultant & Contractor

Outdated Version

Previous Version

If you missed the link above, the previous FancyUpload for MooTools 1.11 is still available including example code and minor updates.

Features

• Select and upload multiple files
• Filter files by type in the select dialog
• Optional Events to add your own behaviour
• Show and filter useful file information before the upload starts
• Limit uploads by file count and/or file size
• Platform and server independent, just needs Flash 9+ (> 95% penetration)
• Unobtrusive, since the element is replaced after the swf loaded successfully
• Cancel running uploads, add files during upload
• Everything is optional, documented and easy editable
• New in 2.0
  • Get the server response after upload for showing additional informations or previewing the image, etc.
  • Shows the current upload speed and the time left
  • Send additional request data via GET or POST variables
  • Set the filename for the upload request

Compatibility

Fully compatible with all A-Grade Browsers (Internet Explorer 6+, Opera 9, Firefox 1.5+ and Safari 2+) with Adobe Flash 9 player.

How to use

Will be written for the final release, at this time the showcases are the best documentation.

Tips, Tricks and Quirks

How do I access the uploaded files?

Every upload, even with multiple files, results in one request. Access the uploaded file via

• PHP: $_FILES[‘Filedata’]
• Perl: $main::cgi->param(‘Filedata’); … example
• Rails: params[:Filedata] … example
• ASP: Fancy Upload and Classic ASP

Filedata is the default value for the option fieldName, so you can change it. The submitted content-type is always “application/octet-stream”, so don’t trust it when you validate the file.

Flash-request forgets cookies and session ID

Flash FileReference is not an intelligent upload class, the request will not have the browser cookies, Flash saves his own cookies. When you have sessions, append them as get-data to the the URL (e.g. “upload.php?SESSID=123456789abcdef”). Of course your session-name can be different.

Are cross-domain uploads possible?

Forum solution, and FileReference docs:

For uploading and downloading operations, a SWF file can access files only within its own domain, including any domains that are specified by a cross-domain policy file. If the SWF that is initiating the upload or download doesn’t come from the same domain as the file server, you must put a policy file on the file server. More on security and link to cross-domain policies

FancyUpload does not load, the input element gets not replaced

Check in Firebug in Net/Flash that the SWF file loads correctly. If not double check your given options.

Uploads fail with 404 error code

Check your URL and better use an absolute upload URL.

IE takes the upload url relative to the swf, all other browsers relative to the html/current file. So the best solution is an absolute path for the option url or rather the form action. If you have problems with failed upload and 404 error codes, try an absolute url, in your form-action or url option when creating your FancyUpload instance.

Uploads fail with 406/403 error

From the swfupload documentation:

If you are using Apache with mod_security this will not work, you need to put the following in your .htaccess file to disable mod_security:

SecFilterEngine Off SecFilterScanPOST Off

Disabling mod_security isn’t allowed on some shared hosts, and only do this if you know what you are doing. This is due to a bug in the way that flash sends the headers back to the server according to the Flash 8 documentation

Uploads fail with 403/500 error

Check your server config, there must be something wrong. Also see 404, double check the upload URL.

Uploads and Basic Authentication

Flash does not care about authenticated Browsers. Firefix/Win/Flash 9 can handle it, IE too, Mac can’t handle it. Anyways, Flash will ask for its own access username and password.

Requirements

It does not depend on any server-side architecture or language.

MooTools JavaScript Framework 1.2

Download MooTools 1.2.

• Element.Events
• Fx.Tween
• Fx.Transitions
• Selectors
• Json
• Swiff
• DomReady (facultative)

Don’t use compressed code during development to simplify debugging.

Download

• FancyUpload2.js
• Swiff.Uploader.js
• Fx.ProgressBar.js
• Swiff.Uploader.swf (Use right-click/save-as!)
• For interested developers (requires Adobe Flash CS3) : Swiff.Uploader.fla

References

• MooTools Forum: “Fancy Upload by digitarald” with 15 pages
• Jason: Flash Upload Progress for Rails with FancyUpload for mootools
• FileReference (flash.net.FileReference) - Version 9
• Ben Newton: Fancy Upload and Classic ASP

Changelog

3.0 (2009-05-25)

• Added: Option timeLimit (default 30s, 0 for linux). Prevents frozen upload when server fails, after timeout the upload is cancelled and the complete event fired (with “timeout” error).
• Added: Option policyFile, custom location for the cross-domain policy.
• Added: Events beforeStart/Stop/Remove for more control over the upload process (e.g. setting data from inputs).
• Changed: 1s delay for onFail, prevents failing on slow connections.
• Fixed: data is not correctly merged between uploader options and file-specific options.
• Fixed: Removed debugging behaviour on progress bars.

3.0 rc1 (2009-05-05)

• Added: New showcase attach-a-file including first iteration of the class Attach.
• Added: New event reposition, fired when the box is moved.
• Changed: More converted placeholder-units for validation errors.
• Fixed: remove event did not fire correctly, broke option fileListMax
• Fixed: Example script.php did not clear log file correctly.
• Fixed: I really missed a console.log in FancyUpload2.js, sorry!

3.0 rc0 (2009-04-30)

• Added: Total rewrite of Swiff.Uploader JavaScript and Actionscript
• Added: Event based interactions from Flash to JS
• Added: File-based list handling for easy implementation
• Added: IFrame fallback class Uploader.js, mirroring the Swiff.Uploader API
• Added: Several new options like appendCookieData, buttonImage and various validations
• Fixed: All known bugs (case-sensitive typeFilter, sending data, Mac problems, load events, …)

2.0 (2008-12-05)

• Added: Flash 10 support
• Added: removeFile now returns the new global progress status, to refresh numbers
• Fixed: Clickable overlay for Flash 10, define your target element with option “target”
• Fixed: Encoding problems fixed, JS calls failed due to ExternalInterface bugs (Kudos to SwfUpload for their short and efficient fix)
• Fixed: Cancelling a running file starts the next file
• Fixed: Enabled cross domain upload

2.0 beta 4 (2008-05-09)

• Fixed: Fixed fileUpload to return changed options, fixes overriding options.

2.0 beta 3 (2008-05-06)

• Added: Optional events for every callback (e.g. onSelect, onComplete, etc.) are added automatically for more control
• Added: Option limitSize (default false) to limit file size (in bytes) of a single selected file
• Added: Option limitFiles (default true) to limit queue length, ignores finished files
• Added: Option allowDuplicates (default false) to disable duplicate files in queue (checking name and size)
• Added: Option validateFile as custom callback validator (default returns always true). Should return true or false.
• Added: Optional callbacks for handling the file updates, allowing to control the behaviour and layout of the file elements:
  • fileInvalid: called for invalid files with error stack as 2nd argument
  • fileCreate: creates file element after select (see FancyUpload2::fileCreate for default method)
  • fileUpload: called when file is opened for upload, allows to modify the upload options (data, url, method, fieldName) for every upload.
  • fileComplete: updates the file element to completed state and gets the response (2nd argument) (see FancyUpload2::fileComplete for default method)
  • fileRemove: removes the element (see FancyUpload2::fileRemove for default method)
• Fixed: callback options are added as events , so they don’t break FancyUpload callbacks

2.0 preview 2 (2008-04-24)

• Fixed: Removed overflow auto from the lists to fix scrollbars.
• Fixed: Fixed overall progress file size for removed files.
• Fixed: New time left calculation, still needs some tweaks for the internal AS3 calculation.

2.0 preview (2008-04-21)

Refactored JS and ActionScript, it is not compatible with previous FancyUpload but a lot better!

• Added: New Interface using all the new features (will change in the future for easier customization)
• Added: Get the server response for uploaded files in onComplete, no longer error-catching with header status codes
• Added: Get the current states of uploads like time left, bytes upload, for the current file and per queue … for supreme progress bars
• Added: Set POST and GET data for the upload request
• Added: Set the file-name for the upload request, default Filedata, like before.
• Added: Set request options for every file, modify upload options with onBeforeOpen
• Added: New events: onAllSelect, onBeforeOpen and onAllComplete
• Changed: Update to MooTools 1.2 trunk and the modified Swiff Class
• Changed: Updated to Flash 9 + ActionScript 3 for a stable API with more features
• Fixed: Cache bug for IE, thanks to Flash 9
• Fixed: Scroll into view bug for Firefox, fixed wmode
• Fixed: Flash 9 works fine on Linux/Firefox

1.0.2 (2008-04-20)

• Fixed: Fixed IE errors when unloading the page by removing the element in Swiff.Base.js
• Fixed: Scroll into view bug for Firefox, fixed wmode

1.0.1 (2007-07-04)

• Added: Events onError and onCancel for files
• Change: Added better behaviour for onComplete and onAllComplete, now you can trust them
• Change: Removed internal empty onCancel, since Flash makes it useless and some other clean-ups
• Fixed: limitFiles works now and allowDuplicates is default true
• Fixed: Swiff.Uploader.js: Added anti-cache fix for IE and small improvements for parameters
• Fixed: FancyUpload.js: Fixed options in FancyUpload to work with MooTools 1.2dev

1.0 (2007-05-31)

• Changed: Added more checks to make SWF-JS communication more stable
• Changed: Swiff.Uploader options, swf is now the url to the swf and url the upload url
• Fixed: Fixed a bug with multiple uploaders on one page, they all work with one injected swf

1.0 pre (2007-05-23)

• Initial official Release

License

All files are © 2008-2009 by Harald Kirschner and available under the MIT License.

Contact & Discussion

For asking questions, requesting features, filing bugs or contributing other thoughts on this project use the support forum below. Before posting a new question, read through the documentation and the contributed notes for an answer. For problem reports make sure to add enough details like browser, version and a link or the relevant code.

You can contact me for non-support related notes.

Professional Support

I am available for hire if you look for professional and swift help. I can come to your rescue for installation, customization or extending the existing source for your needs.