Thursday, November 16th, 2006
SWFUpload: A nicer file upload experience
Category: Component
, Flash, JavaScript
Lars Huring and team have created SWFUpload, a small JavaScript/Flash library that tries to re-make the way file uploads works on the internet.
It works by replacing the contents of a div with a small transparent flash that handles all the upload-frontend, javascript for configuration and callbacks and html/css for styling/looks.
This allows:
- Specify what filetypes are to be displayed in the upload dialog
- Upload multiple files using normal ctrl/shift-click to select multiple files
- Get file size and other info before upload starts and report that information back to the page.
- Style upload buttons any way we want using html/css and more...
It will degrade to a normal html upload input-field if flash/javascript isn't present.
Example
JAVASCRIPT:
-
-
<script type="text/javascript">
-
-
mmSWFUpload.init({
-
upload_backend : "../../upload.php",
-
button_image : "images/custom_button.png",
-
button_mouseover_image : "images/custom_button_over.png",
-
width : "258px",
-
height : "82px",
-
target : "SWFUpload",
-
allowed_filetypes : "*.gif;*.jpg;*.png",
-
upload_start_callback : 'uploadStart',
-
upload_progress_callback : 'uploadProgress',
-
upload_complete_callback : 'uploadComplete',
-
upload_error_callback : 'uploadError',
-
upload_cancel_callback : 'uploadCancel'
-
});
-
-
</script>
-
4.2 rating from 129 votes
looks awesome. Lars, Geoff, big thanks!
Great! I love it when the web is revolutionized!
Thanks!!!
very intersting - what else can you do with flash, when you can open a file-dialog? the java upload applets all need a special policy to open a filedialog and transfer the files - but swf not?
[...] 16:04 y está archivada en: Javascript, Librerias. Puedes dejar un comentario, o enviar un trackback desde tusitio. [...]
Nice. Would it be possible to add drag-and-drop, so I can just drop files on the upload area?
One thing I noticed, if you upload a large file Flash 9 will give you an “Unresponsive script is running” message. I wonder if this can be fixed in the SWF.
The site died. Did anyone download the code? This is exactly what I’ve been trying to do for a while.
[...] Over on Ajaxian Dion Almaer posted about SWFUpload, which is a small Javascript/Flash library that is a great improvement in the way file uploads work online. [...]
Sorry if the site went down, had to re-boot the server. Should be up and running fine now!
@ Patrick Fitzgerald
Would be nice with drag-n-drop wouldn’t it, but as far as i know that is only possible by using custom activex objects in internet explorer, so not really something anyone wants to do.
@ Marcin, Andy
Thanks!
Very nice! Going to take a stab at integrating it into a Rails app.
Thanks!
Using Firefox 2 on Linux with the latest Flash 9 plug-in (very buggy). Only getting a black box where the flash object is. Clicking on this opens the file browser but unusable.
@Billy
Great, someone with Linux as well. Haven’t had a chance to test it with linux. It only requires flash 8 to work, if someone here happends to have a linux FF 2.0 w/ Fp 8 please let me know how you get on, if you get the same result.
I am working on an other way to do this, basically to do a callback to flash whenever the button is clicked to initiate the upload. That would mean that you’d only need a 1×1px swf anywhere on the page, and that would probably get rid of this problem as well. I’m in no way a flash-person, so if anyone has any suggestions on how to get rid of the 100% transparency-hack that i now use please let me know!
// L
i actually did something like this a while ago. One problem is that with large uploads you will get a warning “script in flash 8 taking too long…blah blah”.
[...] Dies und Das: Links vom 16.11.2006 Der Beitrag wurde am 16. November 2006 von Oliver Karthaus veröffentlicht Typischer Donnerstag ohne große News: Blogs beeinflussen die Kaufentscheidung von Internetnutzern. - Darren Rowser beschreibt, wie man eine profitable Nische für AdSense findet. - Ohne Links gibt’s auch kein Trackback, schreibt der e-commerce-blog. - Google hat im offiziellen AdWords-Blog auf die Beschwerden vieler Werbekunden reagiert, die sich über den neuen Quality-Score für die Landing-Pages beschwert haben. - Für Ajax-Fans: Auf ajaxian gibt es einen interessanten File-Uploader zum downloaden, der Ajax mit Flash “verheiratet” und ziemlich slick ausschaut. - 44 Euro pro Neukunde erhält man beim Partnerprogramm von CashDorado. Abgelegt in Webmaster Work | Tags: none –> [...]
You can do drag and drop uploads using RadUpload at http://www.radinks.com/upload/
I’ve been using it for years. You can drop whole directories of photos on to the thing and they upload and are processed with whatever you want to use on the server side. I’ve been using PHP.
@Phill Kenoyer
Hmm… Java applets? I dunno… :-)
Thanks for the tip though, but I think that i’ll keep lobbying Adobe to add it as a feature in the flash player - or even lobby w3c to add a “” to the spec! :D
I recently found a very interesting website:
http://alreadylinked.com/
There you can purchase ad space for your Blog etc.
I’ve done quite the same thing more than one year ago … however, nice logo .
I know someone use flash & javascript to play mp3 in webpages.
Thus we can play a “dingdong dingdong” when user submit or something.
For really large uploads, you’ll get the notorious “A script in the movie is causing Adobe Flash Player to run slowly” alert. I’m not a Flash developer, but one work-around for this can be found at http://www.billdrol.com/Extras/extra28.html.
I also like the way Gmail handles file uploads for attachments - you select the file using a normal form upload dialog. Then it starts uploading the file in the background, and when the upload completes, it removes the upload field and replaces it with the name of the file. All this is transparent to the user.
There is no Flash 8 for linux. Only the ‘official’ v7 and the new v9 beta. I’m going to take a look at it when I get home. RUnning FF2 with v9b on Kubuntu Dapper.
Tried it a moment ago with FF2, Flock 0.7, and Konqueror 3.5.5 on Kubuntu Dapper with Flash v9 all around. Get the same black box as the other poster. Dialog opens, file APPEARS to upload, but there is no indication of success/failure. Hope you can find the bug, because it’s a really slick implementation on supported systems!
DigitalLink did You try my old FileReferenceList too ?
I tried it … but it COMPLETELY crashes my browser. Shuts it right down. I tried it twice to see if it was a glitch, but it did the exact same thing both times.
Had good luck using the Rad Links uploader. Set it up and customized it a bit for my wife to upload her eBay auction pix with. She’s my ease of use guinea pig, and thought it was quite nice.
Wow … with player beta 9 ? Really strange, however thank You for this info.
I’ve been looking at a number of Flash implementations for multi file upload - all are based on the same principle of using the ActionScript FileReference object introduced in Flash 8.0.
However I’m having problems implementing this over a secure connection (SSL / HTTPS). The strange thing is HTTPS works fine with IE 6.0+ but not in Mozilla FireFox (1.5+) - which causes an IOError.
Has anyone managed to implemented this via HTTPS on FF?
Online references:-
Oinam multi upload
Flash upload and HTTPS
I can confirm… with flash 9 beta in Linux FF2 (Ubuntu 6.10) I get a black box. Clicking pops open the file chooser dialog. If you are on IRC, I’m newz2000 on freenode and would be willing to help troubleshoot in real time.
Translated a tutorial to Spanish, you can find it at:
http://www.propiedadprivada.com/swfupload-web-uploads-macromedia-flash/150/
An example of use:
http://www.propiedadprivada.com/lab/swfupload/
Thanks for the great work.
Just don’t understand one thing .. How could i “”Get file information/size before upload starts”" without onSelect callback, like in Andrea Giammarchi example?
Hey! Just checked out the new 0.7 version and I’m pleased to say it is WORKING with FF2/Flash v9beta on Linux! w00t!! Glad you found the problem and got it working. :)
Glad to see you ppl like it. Yes, the new version’s got quite a few changes. Now the look/feel is completely controlled by CSS and i got rid of the “hackish”-transparent swf-overlay.
I also got rid of the annoying script-timeout bug, so big files shouldn’t be a problem now either.
I also got the filesize down on the swf, so the whole swf/js-package shouldn’t be much more than 10k now, and that’s including all of SWFObject, so you get that “for free” as well!
// L
komfortabler Datei-Upload mit SWFUpload
Upload-Funktionalität ist ein aktuelles Thema. Nicht nur um Anhänge an einen Webmailer zu schicken, sondern auch um z.B. Videos oder Bilder in ein Social-Networking Portal zu packen. Um so wichtiger, dass diese Funktion möglichst einfach und dennoch…
Lars,
How is the file being saved? Is a stream being written to the server by packet size, or is the file loaded into the servers memory and then saved?
Thanks.
can’t get it to run on an ASPX page :|
can anyone help?
I can upload files fine using SWFUpload but I don’t see any progress bars. I’m using the exact example that came with it and it’s not working. Any Ideas?
Ran
I can’t get it to work. I just get a “Queue done!” message with no other information or loading bar.
I have the same problem. The latest version doesn’t show the progress bar (IE6 and FF2) although the code looks fine.
A previous version (0.7) I still use seems to have a problem with IE7 - no progress bar either. IE6 or FF2 seem to work fine. Any help would be appreciated.
I had the same issues in both the browsers with the downloaded scripts, but not with the website itself, so I started searching and copied the event handlers you can find in http://labb.dev.mammon.se/swfupload/jscripts/example.js
These worked like a charm in IE7 and FF2.
Steven,
I’m having this problem as well. Your link points to what seems to contain the content of the example.js file. Where did you “copy” the event handlers, or the whole file to?
using version 0.8.5. Working perfectly under windows, and its not working under browsers under mac os x.
To fix problem in IE open example.js and comment/remove this line:
console.log(this.obj);
It’s in function $(id) at very top
This is for debugging in FF. IE7 doesn’t have this function so it goes crazy.
To fix problem in IE open example.js and comment/remove this line:
console.log(this.obj);
It’s in function $(id) at very top.
This is for debugging in FF. IE7 doesn’t have this function so it goes crazy.
Thanks for all your help, but I don’t get it… :-(
I already use the code from the website (i.e. I don’t have console.log(this.obj); included), but it still doesn’t work.
I got this working yesterday. I had to change the code in the example.js file to…
function $(id) {
return document.getElementById(id);
}
// Default upload start function.
uploadStart = function(fileObj) {
$(”filesDisplay”).style.display = “block”;
var li = document.createElement(”li”);
var txt = document.createTextNode(fileObj.name);
li.className = “uploading”;
li.id = fileObj.name;
var prg = document.createElement(”span”);
prg.id = fileObj.name + “progress”;
prg.className = “progressBar”
li.appendChild(txt);
li.appendChild(prg);
$(”mmUploadFileListing”).appendChild(li);
}
uploadProgress = function(fileObj, bytesLoaded) {
var progress = $(fileObj.name + “progress”);
var percent = Math.ceil((bytesLoaded / fileObj.size) * 100)
progress.style.background = “url(jscripts/SWFUpload/images/progressbar.png) no-repeat -” + (100 - percent) + “px 0″;
}
uploadComplete = function(fileObj) {
$(fileObj.name).className = “uploadDone”;
$(fileObj.name).innerHTML += ” ” + (Math.ceil(fileObj.size / 1000)) + ” kb”;
}
uploadQueueComplete = function(fileObj) {
alert(”File Upload Completed”);
}
uploadCancel = function() {
alert(”File Upload Cancelled”);
}
This may be a stupid question but what do I have to do to change the colors of the progress bar? Can I simply make my own “progressbar.png” image file to replace what’s already in the images subdirectory???
@Andy
Thanks, but this is exactly the code I already use and which doesn’t work for me…
Yes, you can create your own progessbar.png. But if you want to change the size you should also adjust the corresponding entries in the .css file.
Finally got it working :-) but I don’t understand why…
I took the original example.js and deleted the line with console.log(this.obj); (like Mikluha said) and now it works.
There is a big problem incorporating this code into ASP.NET, since I need to use default form tag as well as the additional form tag for this code. If I remove the form tag from the target div, it gives error.
ran into an issue where in IE7 this works perfectly but in FF2 it is like it’s not going to the upload. It appears that everything has been uploaded correctly, but there are no files uploaded. thanks
For some unknown reason, Macromedia limits the size of the upload to 100 mb. Do you know why and if there is some way ot override this limitation?
Otherwise, great utility, works like a charm on ff and opera here.
I am actually using Adobe Flash Plugin version 9.0.21.78 on Kubuntu 6.06 and file upload is working well.
You just have to install flashplugin-nonfree package from multiverse repository, more info here:
http://wiki.debian.org/FlashPlayer
same issue as samantha - using FF on W2K the upload seems to succeed, but no file appears to actually have been uploaded.
It doesn’t work on IE7 for me. And it’s not only on my website but on labb.dev.mammon.se/swfupload/ that it doesn’t work.
Where do you ge the version 0.8.5?
I just downloaded from their website the version 0.7.1 …
Has anyone seen this problem in IE 6? When I run it with FF no problems but IE gives me this error.
Microsoft JScript runtime error: ‘_mmSWFUploadField’ is undefined
I added text to the dynamically generated anchor and it is displaying so I know the object was created but I cannot figure out what is going on here… Any help would be greatly appreciated.
By the way it works fine when I visit the download site.
never mind my comment above: in my case (coldfusion) the cffile tag needed an unusual parameter “form.filedata” rather than the expected “form.filename”. My working version of upload.cfm contains this one line,
[cffile action="upload" fileField="form.filedata" nameConflict = "overwrite" destination="#expandpath('./')#"]
SWFUpload is a great concept. I develop in ASP.Net and found that it doesn’t quite work. I had to modify the SWFObject script to add the Flash (object tag) out side the FORM tags instead of in the ‘target’.
I’m working on the 0.7.1 version (at least that’s what the js file says) where do I pick up the 0.8.5 version?
I made some more extensive modifications that allow you to add multiple SWFUploads to the same page.
I don’t have anywhere to host my modified scripts but you can see what I’ve done at SWFUpload Revision 2 at Line by Line
Thanks for the great tool Lars!
Does anyone know what link_mode, link_text and css_class configuration options do? Not all of the configs are explained and I just want to fully understand the script.
Hi!
We have updated the url for SWFUpload, please visit http://swfupload.mammon.se instead.
/Olov
hi,
i have one question how to modify the script to accept .mp3 and .wav files , since most of my files would be from this category , and how to set the script to accept the size more than 10 MB please suggest , thanks in advance.
Regards
hi,
i am using swfupload to upload files and it works great in mac Firefox, safari and opera. i have the entire thing inside a form tag, but this is creating issues inWindows IE 6.0. if i take the form tag out, it works in IE. is there a way i can fix this issue? Thanks a lot
Anjana
Very clever mate, so useful, worx fine aspx/php, realy nice work, just 1 question would it be possible, even in the future, to get response from backend php, let’s say it stored pictore, authored DB, and responded some xml. In this case u could stay tuned within all the loop::)
Cheers
HUH, i even managed to run it on Classic ASP, using binary collection,
just grab those two files:
http://www.saywow.co.uk/swfup/backend.asp.txt
http://www.saywow.co.uk/swfup/cls_CBUpload.asp.txt
lock and load it.
Anybody got it working with cfmx.
I have integrated this with my website and works great, except one major shortcoming. It does not work at all for my mac users. I went back to square one, downloaded the raw source code, and tested it on a mac, and sure enough, doesn’t work in the raw download either. The strange part is is that it somehow works on the mac on the actual swfupload site. I was able to determine that uploading files a 2nd time on the mac will finally produce the uploadqueuecomplete callback function. I have 6 mac users all confirming it does not work for them. The mac reports 0 errors in the FF error console, I turned on error reporting in swf, no errors reporting.
I’d love to see more examples of this working with Coldfusion. Has anyone expanded on this and added any additional features?
I’ve got an entire collaboration suite underway and I’ve switched my uploader for file handling to this. The whole thing is CFMX 7 with FlashForms.
Send me an e-mail if you want to see it and I’ll setup a demo account for you.
Could you please make a sample demo on your downloads? Thanks
Just wanted to let you guys know that we have now released a new version of the library, this version is based on all the great fixes and comments that we have recieved from the community.
Check it out: http://swfupload.mammon.se
I’m getting the same error as James above, but with IE 7. It works fine in Firefox.
What might be causing this error below?
‘_mmSWFUploadField’ is undefined
Sir, i have problems with the new release that you post on the site. It seems that the
My window.onload doesn’t call this id on my index.php. Is there anything that I’m missing? I’ve already get the items on your site such as, example_callbacks.js, SWFUpload.js, SWFUpload.swf., and theme.css. Is there any download sample demo instead of just js and flash? thanks. hope u could post the index.php and upload.php.
div id=”SWFUploadTarget”>
form action=”upload.php” method=”post” enctype=”multipart/form-data”>
input type=”file” name=”Filedata” id=”Filedata” />
input type=”submit” value=”upload test” />
/form>
/div>
forgot to include this one
Hi!
Thanks for the great work! But could you PLEASE post the upload.php? The one I’ve tried was from an older version of SWFUpload in it doesn’t work with the new release.
Thanks in advance.
Egbert
For using SWFUpload on MacOS, I had the same problems as the others; however, I found that the events only fired when the upload.php script contained data (i.e. it needs to return a valid HTML file and can’t just return an empty document!)
That took for EVER to figure out.
I’ve still got this error when I first try to load my upload page:
‘_mmSWFUploadField’ is undefined
Anyone know what might cause that?
In case anyone has had the same problem as I have with the progress bar, here may be the solution:
If you are having files upload successfully using SWFUpload, but the progress bar is not working, it may be that you have not downloaded the image file, progressbar.png, and ensured that the example_callback.js file is pointing to the correct path. (look for function uploadProgress)
I think it would be fantastic if the folks working on this project could provide a fully functional demo for download, with all the files needed, paths pointing to the right places, etc. I think it would make this a much more popular solution if it was not so difficult to get working.
But alas, I did finally get it all working and I think its pretty awesome. So thanks a lot to everyone who has put time into this!
Is it need, flash installed in server?
Awesome shout out. This is a great little tool. I’ve been trying for the past hour to incorporate it into my own form though. Aka, user fills out form, selects pics (if they want) then hit the form post button. I want that button to call the upload and once that it done, submit the form. The only way i can get the upload to work is to use the link they give you only when you select a file. Anyone know how to call the uploadQueue function? Thanks
It are always the simple solutions that make the difference. This is again a great example for this.
Thanks a lot for this great help!