FancyUpload - Swiff meets Ajax (v1.0)
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.
Showcase “Queued Photo Uploader”
The known example, queued upload for photos.
The Action Happens Here
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!).
What happens?
Check the automated log file after upload. The PHP script does not save the files but logs every request.
JavaScript & MooTools
window.addEvent('load', function() { /** * We take the first input with this class we can find ... */ var input = $('demo-filedata'); /** * Simple and easy * * swf: the path to the swf * container: the object is embedded in this container (default: document.body) * * NOTE: container is only used for the first uploader u create, all others depend * on the same swf in that container, so the container option for the other uploaders * will be ignored. * */ var upload = new FancyUpload(input, { swf: '/project/fancyupload/1-0/source/Swiff.Uploader.swf', queueList: 'demo-queue' }); /** * We create the clear-queue link on-demand, since we don't know if the user has flash/javascript. * * You can also create the complete xhtml structure thats needed for the queue here, to be sure * that its only in the document when the user has flash enabled. */ $('demo-status').adopt(new Element('a', { 'href': '#', 'events': { 'click': (function(e) { e.stop(); upload.clearList(false); }).bindWithEvent() } }).setHTML('Clear Completed')); });
XHTML Markup
<form action="/project/fancyupload/1-0/showcase/photoqueue/script.php" method="post" enctype="multipart/form-data" id="form-demo"> <fieldset> <legend>Select Files</legend> <p> Selected photos will be queued for upload, select all your files and start upload the upload. </p> <label for="demo-filedata"> Upload Photos: <input type="file" name="Filedata" id="demo-filedata" /> </label> </fieldset> <fieldset> <legend>Upload Queue</legend> <div id="demo-status"> Check the selected files and start uploading. </div> <ul class="fancyupload-queue" id="demo-queue"> <li style="display: none" /> </ul> <p> <input type="submit" id="simple-submit" value="Start Upload"/> </p> </fieldset> </form>
PHP Script
<?php if (isset($_FILES['Filedata']) ) { $file = $_FILES['Filedata']['tmp_name']; $error = false; /** * THESE ERROR CHECKS ARE JUST EXAMPLES HOW TO USE THE REPONSE HEADERS * TO SEND THE STATUS OF THE UPLOAD, change them! * * If you don't change this example-file and ask me later why your * uploader can't upload other files than images I'll not answer! Thank you! */ if (!is_uploaded_file($file) || ($_FILES['Filedata']['size'] > 2 * 1024 * 1024) ) // Example Validation: Need file < 2Mb { $error = '400 Bad Request'; } if (!$error && !($size = @getimagesize($file))) // Example Validation: Needs an image { $error = '409 Conflict'; } if (!$error && !in_array($size[2], array(1, 2, 3, 7, 8) ) ) // Example Validation: Needs a jpeg { $error = '415 Unsupported Media Type'; } if (!$error && ($size[0] < 25) || ($size[1] < 25)) // Example Validation: Needs dimensions > 25px { $error = '417 Expectation Failed'; } /** * This simply writes a log entry */ $addr = gethostbyaddr($_SERVER['REMOTE_ADDR']); $log = fopen('script.log', 'a'); fputs($log, ($error ? 'FAILED' : 'SUCCESS') . ' - ' . preg_replace('/^[^.]+/', '***', $addr) . ": {$_FILES['Filedata']['name']} - {$_FILES['Filedata']['size']} byte\n" ); fclose($log); if ($error) { /** * ERROR DURING UPLOAD, one of the validators failed * * see FancyUpload.js - onError for header handling */ header('HTTP/1.0 ' . $error); /** * Abort execution and output something. * * FLASH NEEDS A CONTENT IN THE RESPONSE OR WILL IGNORE IT */ die('Error ' . $error); } /** * UPLOAD SUCCESSFULL AND VALID * * Use move_uploaded_file here to save the uploaded file in your directory like: * * move_uploaded_file($file, '/user_uploads/'); */ die('Upload Successfull'); } ?>
CSS Stylesheet
/**
* Only for the structure
*/
This example and the accompanying sources/assets are © 2008-2009 by Harald Kirschner and available under The MIT License. For debugging and profiling the scripts and their markup download Firefox and use addons like Firebug and Web Developer Toolbar.
Keywords:
1231 Comments
Please use the support forums for discussing the project, asking questions or posting bug-fixes!
-
hello,
Who can explain me how to send POST data while uploading ? Thanks !!!! -
First of all, I would like to express my gratitude to all of those who helped each other on the previous version of FancyUpload. Thanks to you guys, specially Digitarald for his tremendous programming skills and for all the time he spends, helping people, like me, with no real knowledge in Javascript.
I was using the previous version of FancyUpload and I am trying to use the brand new one. Right now I got it work, but I had to copy the Mootools.js in the example to make it work because the Mootools version don't work. That was the only problem I had (maybe it will help, who knows).
And here comes the question. Like someone who posted in the comments, I am trying to post Data along with the Files I upload. My problem is that I have a <select> items, and I would like to send Image with the Id I would select in the list of items. How can I proceed ? Thank you very much my friends, J.</select> -
Have not tried it out personally but playing with the demo it worked great for me in FF 2.0.0.14 and IE6/7.
This is a really nice integration of JavaScript and Flash, great work. -
How I can send POST data with the fileupload?
I user mod_rewrite for my website, so I can't use GET...
I can't find a documentation...
Bist du eigentlich ein Deutscher? Im alten Code waren deutsche Kommentare xD -
Use options: data (defined in Swiff.Uploader) or return {data: ...} from onBeforeOpen to set POST data for a single file. I'll add documentation for that later when the API is stable. The .de in the domain is not just camouflage ;)
-
Harald, I'm having an issue with using callbacks, namely the OnAllComplete callback. I've tried setting passing a "callBacks" object with the onAllComplete callback defined as a function, but that causes something to break (without an error), as the uploader never actually initializes. I also tried passing an onAllComplete to the constructor like you're using onLoad, but that isn't recognized (and nothing within it is used). Any brief examples for using the other callbacks?
-
Can you paste some more code here, so I can make sure that I understand what you are describing and what code u are using.
-
Use the option queued for that and all uploads start at one time. But uploading queued is better for the server health and faster because the connection is not shared. Usually you also resize images or do other resource-eating calculations. Also the client-server connections are limited, to 3-4 connections. Of course simultaneous uploading looks cool, but confusing for the normal user.
-
This is good. Just an idea can we use Ajax to open multiple http connections and upload the files faster and simultaneously. Please post your comments on this Pros/ Cons.
-
I have a problem with the uploader on Mac (both Firefox and Safari). On my site after I try to uplaod it the over progress goes to 100% straight away and each file has an error in status line: ioError #2038 and when I tested the one on this site I got another error: loading stops on 98% and the status says: httpStatus 301. ANY IDEAS?? :-)
Post your comment
Please use the support forums for discussing the project, asking questions or posting bug-fixes!
thanks