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
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.
1231 Comments
Please use the support forums for discussing the project, asking questions or posting bug-fixes!
-
When adding a 0 byte file the script stop working...
-
Thx for the report, I'll look into this (maybe I'll call it a validation feature, not a bug :D )
-
Error: Error #2038: File I/O Error.
at flash.net::FileReference/get size()
at uploader_fla::MainTimeline/valueOfFile()
at uploader_fla::MainTimeline/selectHandler()Any idea? I have test, and not work...
-
anyone know how to access the files via asp.net? I need to store the file name in a database for each file. Is it even possible to get the filename on the server side? gracias
-
Great. I just spent 6 days trying to integrate this nightmare:
http://blog.joshuaeichorn.com/...
With a project I'm working on and now I see this. I searched HIGH AND LOW for this and it never came up. ayayayay
-
PHP APC upload progress is also a solution but depends on server logic and does not allow multiple selection of files ... I'm glad that u found FancyUpload ;)
-
Do you have any version for the asp.net users? (-:
just the PHP part to replace. -
You can access the file like the usual uploaded file, the default field name (option *fieldName*) is "Filedata", u can rename it with that option. I added that question to the FAQ.
-
Just put this in Page_Load:
foreach (string fileKey in HttpContext.Current.Request.Files)
{
HttpPostedFile file = HttpContext.Current.Request.Files[fileKey];
file.SaveAs(Server.MapPath("/Files/" + fileName));
}Also you need to modify the Javascript to tell the action of the form, since the ID is made up by ASP.NET
-
Hello, Thank you for this great progressbar, I like it ! But I need advice.
I would set up this progressbar on one website using a yootheme template (that's mean there is a lot of using mootools).
So when the page is loaded, I have always the inputbox and the button, and when I go at the end of the page, and go back to the form, I ve got the only one 'browse' button as it should be.
There is a difference between firefox and IE:
- with IE / no templates using mootools: no problems
- with firefox / no templates using mootools: I need to go at the end of the page
- with IE / the mootools template: never work
- with firefox / the mootools template: I need to go at the end of the pageI check twice the mootols release was good and now I don't know what I'm supposed to do.
Please, does any body have an idea ?
(ps: sorry for mistakes, I'm french :p).
Thx -
Try anonther option for container, an empty element which is next to your input and visible. I thought that the scroll bug is fixed, maybe this is a conflict with another script. Do u have a test page or code?
-
Ok, that was a good idea, now it's work pretty fine with firefox.
And about the mootools template, there is no longer conflict, It's fixed ;) .
But now, with the new element, it's no longer work with IE :(
Thx a lot for the firt idea: you're a genius ! -
I'm having trouble identifying the user who uploaded the files.
On the website the user is identified by a Cookie, but when recieving the files, no cookie is avalible.
How can I do this? -
-1 point for not reading the tips-tricks-quirks answers. You need to add the cookie variable as GET/POST.
-
The showcase doesnt work in firefox 2.0.0.14 ?
-
Sure it does, check your Flash version.
-
Hello everybody,
Everything was working just fine until I tried it online. Indeed, I was working on local so far and everything went pretty well.
When I uploaded my website, I just got a Fatal error: Call to undefined function: json_encode() at the end of my uploading list. I checked my PHP version and it seems Json is activated so I don't know what else to do.Did someone have some problem with Json too ?
-
Nevermind. My PHP files were loaded through PHP4. Json is available since PHP 5.2.
-
Anyone else having problems losing session data when the requesting to the upload script (it's requested 3 time when you upload 3 files, etc. etc.)
I'm creating a database entry (what i'm calling an upload ticket), and then setting a session variable. At the beginning of my upload script, if that session variable is already created, then we don't need to create another DB entry. But I find that session variables are dropped on each request.Anyone overcome this?
--Eric--
Post your comment
Please use the support forums for discussing the project, asking questions or posting bug-fixes!
Ok, and what is the element actions? Paste some html markup :)