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

  1. <script type="text/javascript">
  2.  
  3.     mmSWFUpload.init({
  4.         upload_backend : "../../upload.php",
  5.         button_image : "images/custom_button.png",
  6.         button_mouseover_image : "images/custom_button_over.png",
  7.         width : "258px",
  8.         height : "82px",
  9.         target : "SWFUpload",
  10.         allowed_filetypes : "*.gif;*.jpg;*.png",
  11.         upload_start_callback : 'uploadStart',
  12.         upload_progress_callback : 'uploadProgress',
  13.         upload_complete_callback : 'uploadComplete',
  14.         upload_error_callback : 'uploadError',
  15.         upload_cancel_callback : 'uploadCancel'
  16.     });
  17.  
  18. </script>

SWF Upload

Posted by Dion Almaer at 7:44 am
76 Comments

++++-
4.1 rating from 163 votes

76 Comments »

Comments feed TrackBack URI

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 …

Comment by James — January 13, 2007

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.

Comment by Chris — January 15, 2007

By the way it works fine when I visit the download site.

Comment by Chris — January 15, 2007

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(‘./’)#”]

Comment by jtheis — January 17, 2007

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!

Comment by Jake — January 19, 2007

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.

Comment by Justin — January 20, 2007

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

Comment by pankaj — February 1, 2007

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

Comment by Anjana Gopinath — February 13, 2007

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

Comment by Norb — February 13, 2007

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.

Comment by Norb — February 13, 2007

Anybody got it working with cfmx.

Comment by zlaya — February 14, 2007

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.

Comment by Jay — February 27, 2007

I’d love to see more examples of this working with Coldfusion. Has anyone expanded on this and added any additional features?

Comment by Nate — February 28, 2007

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.

Comment by Andy — March 9, 2007

Could you please make a sample demo on your downloads? Thanks

Comment by Jayson — March 15, 2007

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

Comment by Lars Huring @ SWFUpload team — March 16, 2007

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

Comment by Nate — March 16, 2007

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.

Comment by Jayson — March 17, 2007

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

Comment by Jayson — March 17, 2007

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

Comment by egbert — March 17, 2007

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.

Comment by Frank — March 22, 2007

I’ve still got this error when I first try to load my upload page:
‘_mmSWFUploadField’ is undefined
Anyone know what might cause that?

Comment by Nate — April 12, 2007

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!

Comment by Aaron Lozier — June 6, 2007

Is it need, flash installed in server?

Comment by palPalani — November 12, 2007

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

Comment by Conure Studios — November 24, 2007

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!

Comment by partnerprogramm — August 4, 2008

Leave a comment

You must be logged in to post a comment.