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!
