Other versions:

FancyUpload - Swiff meets Ajax (v1.0)

Project FancyUpload - Swiff meets Ajax Showcase Swiff meets Ajax for powerful and elegant uploads. FancyUpload is a file-input replacement which features an unobtrusive, multiple-file selection menu and queued upload with an animated progress bar. It is easy to setup, is server independent, completely styleable via CSS and XHTML and uses MooTools to work in all modern browsers.


Showcases

Outdated Version

Get the new FancyUpload 3.0! 3.0 is the current release (more stable, more showcases, more documentation) and it is compatible with 2.0 and 2.1 (Old versions are not maintained anymore!).

Compatibility

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

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 8+ (> 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

Its intended that you edit this class to add your own queue layout/text/effects. This is NOT a include-and-forget class. If you want custom effects or more output, use Swiff.Uploader as interface for your new class or change this class.

The Uploader replaces (after the swf is loaded successfully) the input element with the button. You can add your own replacement method with the option createReplacement and add an image or whatever you like. Most features can be disabled with the options. Default is that you can add multiple files, that are only images and that the upload is queued.

Getting started

The FancyUpload widget is initialized with one simple call.

new FancyUpload($('my-file-input'), { /* options */ });

For best results use the window.addEvent(‘load’, fn); to initialize the uploader. Like:

window.addEvent('load', function() {
 
    new FancyUpload($('my-file-input'), { /* options */ });
});

Try to copy the html from the example page and change the structure to your needs. Take a look into the sourcecode of FancyUpload.js, there are many comments, also in the example page. All options are documented inline, so read the files.

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

The submitted content-type is always “application/octet-stream”, so don’t trust it when you validate the file.

Can I send additional data
You can change the upload URL in the upload() method (append GET parameters), but it is easier to send an Ajax request where the filename acts as index for more form values. In the forum is an example from Josh Beck on using Ajax to send additional data.
Can I upload only images?
No, that is just a preset option. Override the option types to null (upload any file) or an object similar to the preset for your own filters.
Flash-request forgets cookies and session ID
Flash FileReference is stupid, the request will have no cookies or additional post data. 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.
Flash has one request without file
When Flash starts uploading the first request is empty, without file. Usually it does not matter since you should validate the request parameters.
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.

IE: There is a description in the forum from jhmilan on how to avoid the cache problem in IE creating multiple files for the swf. IE can be so annoying:

FancyUpload loads when scrolling down on Firefox
The swf is injected into document.body by default (option container), so its at the end of the site. Firefox initializes flash when its visible, so you have to scroll down in Firefox to enable the Uploader when the swf is not in the viewport. When the swf is invisible in a container (overflow) this can result in errors in IE.
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.

Linux/Firefox crashes

*FileReference + ExternalInterface are stable on Linux with Flash 9. If not try the latest version from Adobe Labs.

Otherwise this combination makes Flash very unstable and is not supported since it crashes the browser when the upload is finished.

References

Sites using it

I’m working on that list …

Requirements

MooTools JavaScript Framework 1.1

Download MooTools 1.11 with at least these modules:

  • Class.Extras
  • Element.Event
  • Element.Selectors
  • Fx.Style
  • Fx.Transitions
  • Window.DomReady (facultative)

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

Download

Get the new FancyUpload 3.0! 3.0 is the current release (more stable, more showcases, more documentation) and it is compatible with 2.0 and 2.1 (Old versions are not maintained anymore!).

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.

Share it: Stumble it!Digg This!del.icio.us (No Posts)

discussion by DISQUS No Comments

Please use the support forums for discussing the project, asking questions or posting bug-fixes!

Sort:
No Comments
  • First
  • ‹ Prev
  • Next ›
  • Last
No Comments
  • First
  • ‹ Prev
  • Next ›
  • Last

Post your comment

Please use the support forums for discussing the project, asking questions or posting bug-fixes!


Internet Consultant & Contractor

I'm available to combine forces with you and your team to find the most simple, elegant and convenient web solutions . I await your call.

If you just like my work and want to say Thank You, donate via PayPal or Amazon Wish List.

Developer Resources & Tools