Multiple File Uploads with Progress Meters using Flash 8 and JavaScript
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
:Posted: 2007-09-25 15:57
:Tags: Pylons, Python, Web, Flash
There are two problems with uploading files over the web using a simple HTML Form
* You can only upload one file at once
* You don't get any idea of the upload progress
There are ways of solving these problems using AJAX and a hidden iframe (I might write one up if I get a chance) but Flash 8 provides a better solution because it allows you to select multiple files from a single dialog box so that if you want to upload a hole directory you don't have to select each of the files individually. Flash 8 can also keep track of the upload progress on the client side so you don't need to implement any server-side feedback system as the file is being uploaded. You can also specify a maximum file size.
There are a number of open source implementations which expose this Flash 8 functionality via JavaScript. The one I use is `SWFUpload `_.
If you follow on from my last upload example you can replace the ``index()`` action with this::
Upload files using flash and javascript - SWFUpload
SWFUpload Testpage
Upload Example
Replace contents of a div with links for uploading and browsing,
degrades gracefully if flash/javascript isn't accessible
Queue is empty
Cancel queue
You'll also need to `download the SWFUpload source distribution `_ and copy the ``jscripts`` directory into your Pylons project ``public`` directory so that the ``/jscripts/`` links in the HTML work correctly. The example also uses some images which are attached to this entry and should be put in the ``public/images`` directory so that the ``/images/`` URLs resolve.
`Accept icon <../2007/09/accept.png>`_
`Add icon <../2007/09/add.png>`_
`Cancel icon <../2007/09/cancel.png>`_
`Progress bar <../2007/09/progressbar.png>`_
If you have Flash 8 or above and run this example you'll now be able to upload multiple files to the unmodified controller. You can change the CSS and the images to change how the upload behaves and there are plenty of hooks for you to tie what's happening in Flash to your page's JavaScript.
`Sample Pylons File Upload Project <../2007/09/uploadtar.gz>`_