jquery.swfuploader takes away the pain of making your own multiple ajax file upload frontend. You get a nice flickr like UI with just a few lines of javascript.
jquery 1.2 (and above)
jquery.swfuploader is jquery based. So you must have it to work.
SWFUpload 2.2 (and above) and swfupload.queue.js
It uses and extends the functionality of SWFUpload so we can get nice and smooth progress bars.
This is used to display status message of each download when hovering over the progress bar.
If you use metadata, you can embed the options params in metadata, and jquery.swfuploader will automatically pick it up.
This is a JavaScript Localization plugin for Ruby on Rails. It can automatically import translations from rails to js.
However, i18n.js is still nice even without rails. You just have to export the translations manually.
i18n.js’s API mimics rails I18n API. If you have this setup, jquery.swfuploader takes advantage of i18n.js and is able to localize to the language of your choice.
See Internationalization section for more details.
You need to include something like this:
<!-- SWFUpload --> <script src="swfupload.js" type="text/javascript"></script> <script src="swfupload.queue.js" type="text/javascript"></script> <!-- jQuery and friends --> <script src="jquery.js" type="text/javascript"></script> <script src="jquery.metadata.js" type="text/javascript"></script> <script src="jquery.hoverIntent.js" type="text/javascript"></script> <!-- jquery.swfuploader --> <script src="jquery.swfuploader.js" type="text/javascript"></script> <!-- This is an example set for jquery.swfuploader with minimum functionality. You'll want use the MultiFile set to impress your girlfriend. <script src="sets/exampleset/exampleset.js" type="text/javascript"></script> --> <!-- This is something you want to show off! --> <script src="sets/multifile/multifile.js" type="text/javascript"></script> <link rel="stylesheet" href="/sets/multifile/multifile.css" type="text/css" media="screen"/>
Using jquery.swfuploader is easy, look at the snippet below.
<div class="swfuploader"></div>
<script type="text/javascript" charset="utf-8">
$(function(){
$(".swfuploader").swfuploader({
// specifies the upload url
upload_url : "/upload",
// specifies which set to use
// in this case
set : "MultiFile"
})
});
</script>
And you will get a nice looking upload bucket. Feel free to select multiple files at once, and see the upload queuing action.
jquery.swfuploader does very little by itself. It is like a manager that delegates work to sets such as MultiFile, SingleFile or ExampleSet.
The set listens to events published by jquery.swfuploader and handles all the UI jobs. So they behave like views in terms of MVC.
- The MultiFile set mimics Flickr upload.
- The SingleFile set mimics gmail upload. (sort of)
- ExampleSet is intended as a template for people who wants to create their own sets.
For greater flexibility, I encourage you to make your own set from scratch or extend one of the available sets. This way, you can use jquery.metadata to pass in all options as json data, and put your application specific event handlers in your own set.
swfuploader takes a single options parameter.
This parameter is an extension to the SWFUpload initialization options. ( In fact the options is directly passed into SWFUpload during initialization )
Here is the extended properties:
type: String
Description: This property takes a string that identifies the name of the set.
type: Function Callback
Description: The specified function will be called right after the set is initialized. This callback has no parameters.
All other SWFUpload properties and callbacks are usable as well. ( Except button_placeholder_id and button_placeholder )
Please refer to the SWFUpload Documentation for more details
You probably will never need to do this many options, but here it is anyway!
<div class="swfuploader"></div>
<script type="text/javascript" charset="utf-8">
$(function(){
$(".swfuploader").swfuploader({
// which set do you want to use
set : "MultiFile",
// these are all standard SWFUpload initialization properties
// check SWFUpload documentation for more details
// http://demo.swfupload.org/Documentation/
flash_url : "/swfupload.swf",
upload_url : "/upload",
debug : false,
use_query_string : true,
file_post_name : 'image[attachment]',
post_params : {a:'b', c:'d'},
button_image_url : "/images/mybutton.png",
button_width : "140",
button_height : "24",
button_text : '<span class="button">Select Files to Upload</span>',
button_text_style : ".button {font-size: 14px; kerning: true; font-weight: bold; color: #0063DC;text-decoration:underline;}",
button_text_left_padding: 0,
button_text_top_padding : 0,
button_window_mode : SWFUpload.WINDOW_MODE.TRANSPARENT,
button_cursor : SWFUpload.CURSOR.HAND,
file_size_limit : "100 MB",
file_types : "*.*",
file_types_description : "All Files",
file_upload_limit : 0,
file_queue_limit : 0,
// Note: You should not set button_placeholder_id and button_placeholder
// as they are set by jquery.swfuploader and its corresponding set
// these values will be overriden after intialization
//button_placeholder_id : "my-flash-button-placeholder",
//button_placeholder : $("#my-flash-button-placeholder")[0],
// this callback is from jquery.swfuploader
// this is invoked right after initalization
init_handler : function(){},
// these are all standard SWFUpload callback functions
// check SWFUpload documentation for more details
// http://demo.swfupload.org/Documentation/
file_dialog_complete_handler : function(numFilesSelected, numFilesQueued, totalFilesInQueue){},
file_queued_handler : function(file){},
file_queue_error_handler : function(file, errorCode, message){},
queue_complete_handler : function(numFilesUploaded){},
upload_start_handler : function(file){},
upload_progress_handler : function(file, bytesLoaded, bytesTotal){},
upload_success_handler : function(file, serverData, response){},
upload_complete_handler : function(file){},
upload_error_handler : function(file, errorCode, message){}
})
});
</script>