FancyUpload - Swiff meets Ajax (v2.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”
Creating a nice looking upload queue, including animated progress bars.
The Action Happens Here
This showcase is outdated, please visit the new showcase for FancyUpload 3.0. Documentation & Download for FancyUpload 3.0 here. 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.
Check the Firebug console for event debugging logs. Filesize is limited to 2Mb (client- and serverside).
JavaScript & MooTools
window.addEvent('load', function() { var swiffy = new FancyUpload2($('demo-status'), $('demo-list'), { 'url': $('form-demo').action, 'fieldName': 'photoupload', 'path': '../../source/Swiff.Uploader.swf', 'onLoad': function() { $('demo-status').removeClass('hide'); $('demo-fallback').destroy(); } }); /** * Various interactions */ $('demo-browse-all').addEvent('click', function() { swiffy.browse(); return false; }); $('demo-browse-images').addEvent('click', function() { swiffy.browse({'Images (*.jpg, *.jpeg, *.gif, *.png)': '*.jpg; *.jpeg; *.gif; *.png'}); return false; }); $('demo-clear').addEvent('click', function() { swiffy.removeFile(); return false; }); $('demo-upload').addEvent('click', function() { swiffy.upload(); return false; }); });
XHTML Markup
<form action="/project/fancyupload/2-0/showcase/photoqueue/script.php" method="post" enctype="multipart/form-data" id="form-demo"> <fieldset id="demo-fallback"> <legend>File Upload</legend> <p> Selected your photo to upload.<br /> <strong>This form is just an example fallback for the unobtrusive behaviour of FancyUpload.</strong> </p> <label for="demo-photoupload"> Upload Photos: <input type="file" name="photoupload" id="demo-photoupload" /> </label> </fieldset> <div id="demo-status" class="hide"> <p> <a href="#" id="demo-browse-all">Browse Files</a> | <a href="#" id="demo-browse-images">Browse Only Images</a> | <a href="#" id="demo-clear">Clear List</a> | <a href="#" id="demo-upload">Upload</a> </p> <div> <strong class="overall-title">Overall progress</strong><br /> <img src="../../assets/progress-bar/bar.gif" class="progress overall-progress" /> </div> <div> <strong class="current-title">File Progress</strong><br /> <img src="../../assets/progress-bar/bar.gif" class="progress current-progress" /> </div> <div class="current-text"></div> </div> <ul id="demo-list"></ul> </form>
PHP Script
<?php $result = array(); if (isset($_FILES['photoupload']) ) { $file = $_FILES['photoupload']['tmp_name']; $error = false; $size = false; if (!is_uploaded_file($file) || ($_FILES['photoupload']['size'] > 2 * 1024 * 1024) ) { $error = 'Please upload only files smaller than 2Mb!'; } if (!$error && !($size = @getimagesize($file) ) ) { $error = 'Please upload only images, no other files are supported.'; } if (!$error && !in_array($size[2], array(1, 2, 3, 7, 8) ) ) { $error = 'Please upload only images of type JPEG.'; } if (!$error && ($size[0] < 25) || ($size[1] < 25)) { $error = 'Please upload an image bigger than 25px.'; } $addr = gethostbyaddr($_SERVER['REMOTE_ADDR']); $log = fopen('script.log', 'a'); fputs($log, ($error ? 'FAILED' : 'SUCCESS') . ' - ' . preg_replace('/^[^.]+/', '***', $addr) . ": {$_FILES['photoupload']['name']} - {$_FILES['photoupload']['size']} byte\n" ); fclose($log); if ($error) { $result['result'] = 'failed'; $result['error'] = $error; } else { $result['result'] = 'success'; $result['size'] = "Uploaded an image ({$size['mime']}) with {$size[0]}px/{$size[1]}px."; } } else { $result['result'] = 'error'; $result['error'] = 'Missing file or internal error!'; } if (!headers_sent() ) { header('Content-type: application/json'); } echo json_encode($result); ?>
CSS Stylesheet
#demo-status { background-color: #F9F7ED; padding: 10px 15px; width: 420px; } #demo-status .progress { background: white url(../../assets/progress-bar/progress.gif) no-repeat; background-position: +50% 0; margin-right: 0.5em; } #demo-status .progress-text { font-size: 0.9em; font-weight: bold; } #demo-list { list-style: none; width: 450px; margin: 0; } #demo-list li.file { border-bottom: 1px solid #eee; background: url(../../assets/file.png) no-repeat 4px 4px; } #demo-list li.file.file-uploading { background-image: url(../../assets/uploading.png); background-color: #D9DDE9; } #demo-list li.file.file-success { background-image: url(../../assets/success.png); } #demo-list li.file.file-failed { background-image: url(../../assets/failed.png); } #demo-list li.file .file-name { font-size: 1.2em; margin-left: 44px; display: block; clear: left; line-height: 40px; height: 40px; font-weight: bold; } #demo-list li.file .file-size { font-size: 0.9em; line-height: 18px; float: right; margin-top: 2px; margin-right: 6px; } #demo-list li.file .file-info { display: block; margin-left: 44px; font-size: 0.9em; line-height: 20px; clear } #demo-list li.file .file-remove { clear: right; float: right; line-height: 18px; margin-right: 6px; }
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!
-
Every showcase has docs for all assets like JS, CSS and XHTML. There even is
a package with all files. Of course, a basic understanding of MooTools and
its class-handling makes it easier to dive into the code. -
Hi, i got some problem running it on IE6. Selecting files, OK.But when i press upload, i got only timeout.
I try the example here with the IE6 and i got the same problem.
Is someone make it work on IE6.
I'm on a deadline here.. pls help ..
rori088@gmail.com
Thanks .. -
Oh! I solved it! I was having problems with "Upload File" button on IE8 (but not in Opera), and i almost get mad trying to understand what was going wrong.
It was just a tag i added some days ago in the section.
Of course! Flash didn´t managed that because of a hierarchy issue.
Thanks a lot for this uploader! It´s great. -
this script would have been perfect with the integrated redimensioning of images
-
It´s a very fine blog. Great work! Greatings from Germany
-
Nice uploader, but what happens is that the files upload in random order. I need a solid multiple image uploader that will keep numbers in proper sequence, or chron order by date. Got a fix for that?????
-
I think you need to sort() the files in php, so the images will display in alphabetic order instead of being ordered by 'date'.
Try. Anyway, my pictures are naturally in alphabetic order. -
Gorgeous uploader - amazed your giving it away for free!
Thanks for sharing! -
asdadad
-
Very nice work! Congratz!
-
Browse files is crappy.
Minor changes to css and / or html structure and its not working anymore -
That's exactly what is happening to me!
How can we solve it? -
Very good script... Its a shame that so many halfbrained and clueless "developers" (and i use that term loosely) have to pollute your comments with there completely useless drivel. I do have one small complaint though about this example (I have to bring it up since its the primary reason Flash/JS have gotten such a bad rap all these years)... why wasn't the single file example designed to degrade properly? Sorry for posting this here... didn't seem appropriate to start a forum topic for something so minor though in what is otherwise a very clear, well commented example (To all the morons clambering above me, if you had even the slightest idea what you were doing you would understand just how simple this really is to implement with examples such as these at your fingertips)
-
I don't know this kind of notation
background-position: +50% 0;
Is it possible, to notate an additional plus?
Thx for your post Harald! -
Hi but harald is alive?
-
hhh
-
Why remove button on the filelist when it is already uploaded. It status should be uploaded and disabled. Having remove button is ambigous as it certainly not remove from server.
Anyway to change status or remove that button -
How I can add some data to to request? FOr example - user selects folder to store file - how I can add this to the file and workout it in script.php?
-
I did this:
up.options.url = library/script.php?dir=some
You can dinamically change the destination folder by altering the url option of the object.
Then you should edit the script.php in the moving uploaded file section:
if (isset($_GET['subdir'])) {
$subdirectorio = $_GET['subdirectorio'];
move_uploaded_file($_FILES['Filedata']['tmp_name'], $subdir . $_FILES['Filedata']['name']);
$return['src'] = $subdir . $_FILES['Filedata']['name'];
Post your comment
Please use the support forums for discussing the project, asking questions or posting bug-fixes!
Saying that, this one has an example so I have no idea what "x" is talking about.