Documentation

This page will describe the complete usage of the jqswfupload plugin.

Requirements:

• jQuery v1.3.2
• SWFUpload v2.1
• jQuery UI 1.7 (just using Highlight effect for a while)

Support:

• IE 7+
• Chrome 1+
• Firefox 3+
• Safari 3+

* Not tested in IE6

Usage

First, you must include the plugin and the dependencies:

<link type="text/css" href="jquery.jqswfupload.css" rel="stylesheet" />
<script language="JavaScript" type="text/javascript" src="libs/jquery-1.3.2.min.js"></script>
 <script language="JavaScript" type="text/javascript" src="libs/jquery-ui-1.7.1.custom.min.js"></script>
 <script language="JavaScript" type="text/javascript" src="libs/swfupload.js"></script>
 <script language="JavaScript" type="text/javascript" src="libs/jquery.jqswfupload.js"></script>

This order above is important to make the plugin work, so it have to be followed. The css file controll all the presentation and can be customized.

jqswfupload use the swfupload library with jQuery. So they replace a simple input of type file to a flash based upload that take control of progress, file size and differentely of browser upload, can handle multiples files.

The minimum markup necessary to generate the files buttom:

<div id="upload-container">
 <form action="upload.php" method="post" enctype="multipart/form-data">
 <div id="upload-placeholder">
 <input type="file" name="Filedata" />
 <input type="submit" value="upload" />
 </div>
 </form>
 </div>

With this markup, you can creat a script to simply call the upload:

/*
 * jQuery upload - main file
 */
$(document).ready(function(){
 $("#upload-container").jqswfupload({
 onUploadStart: function(file) {
 //callback when uploadStart
 },
 onFileSuccess: function(file,data,response) {
 //callback when upload success
 },
 onFileError: function(file,code,message){
 //callback when upload raises some error
 },
 totalSize: '100 kb',
 uploadUrl: 'url',
 // The post sent to server in the same request as the file object
 post_params : {
 'type' : 'swfupload',
 'test' : 'val'
 }
 });
});

The jqswfupload has one parameter, the plugin options. This options has an kind of  “analogy” with some swfupload options, but the diference it’s that the defaults ones are enough to create a rich interface.

$('container').jqswfupload(plugin_options);

Options

• uploadUrl
  the upload url that will handle the upload logic and receive post data
  type: string
  default: ‘../upload.php’
• flashUrl
  The path of the swfupload flash file (swf)
  type: string
  default: “libs/swfupload.swf”
• buttomPlaceholderId
  The element wrapped by the input file buttom. Its commom to wrap a div with this id outer the input file
  type: string
  default: ‘upload-placeholder’
• buttomImageUrl
  The url of the buttom add file image
  type: string
  default: ‘images/icon-add.gif’
• buttomText
  The buttom text, ex.: “add files”
  type: string
  default: empty
• buttomWidth
  The width in pixels of the buttom
  type: number
  default: 172

• buttomHeight
  The height in pixels of the buttom
  type: number
  default: 22
• fileTypes
  The file types allowed, you can separate by commas. ex.: “*.jpg,*.png”
  type: string
  default: “*.*”
• fileSizeLimit
  The size limit of each file
  type: number
  default: 10000
• multiple
  define if the upload will be multiple
  type: boolean
  default: true
• cursorType
  You can define a cursor type when the user hover the buttom
  type: string
  default: ‘hand’
• dialogDescription
  The header text of Browser dialog box of file choose
  type: string
  default: “Web Image Files”
• columns
  The labels of the columns of upload interface
  type: object
  default:
  columns: {
  file : ‘File’,
  size : ‘Size’,
  action : ‘Action’
  }
• messages
  The messages used by plugin to make differents user notification
  type: object
  default:
  messages : {
  file_size_limit : ‘You reach the total size’,
  file_already_exist : ‘Some(s) of the file already exist, the other(s) was included’,
  browser_upload : ‘Are you having problem with this upload? Try the common upload instead’,
  start: ‘Start upload’,
  all_completed: ‘All uploads are completed’
  }
• totalSize
  The maximum size of the upload list. You can pass in kb, bytes or MB
  type: string
  default: ‘5 MB’
• messageDelay
  The delay time in miliseconds that the messages keep in the screen
  type: number
  default: 3000
• post_params
  Additional post data passed for each file in key value format
  type: object
  default: empty object

Callbacks

onFileQueue(file)
onDialogClose(files_selected,files_queued,total_queued)
onSwfuploadLoaded()
onUploadStart(file)
onUploadProgress(file,completed,total)
onFileComplete(file)
onFileError(file,error,message)
onFileSuccess(file,data,response)