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!
