Documentation

UI/Uploader

From jQuery JavaScript Library

(Redirected from UI/Upload)
Jump to: navigation, search

« Back to the jQuery UI Docs

A way to upgrade the classic <input type="file"..> elements on your web page with a lot more features like real-time progress bars and multiple file selection.

NameType
Warning:

  • This widget is not a general solution and explicitly requires background information on how file uploading works in the language you work with (being PHP/ASP/NET/PERL/etc.). Please take a look at the (todo:demo) section for an implementation in PHP.
  • This widget can not run on a local file system (e.g. file:// protocol), due to the way Flash interacts with the back end code. You have to run this from a server, either apache, windows or any other server you have access to.
  • People who visit pages containing the Uploader widget can only see the widget if they have both JavaScript turned on (default in all current browsers) and have at least Flash version 8.0 installed.

NameType
Requirements: You have to make sure that you meet the 4 requirements before the Uploader widget will work.

  • jQuery, of course
  • the Uploader Javascript code
  • the Uploader Flash Movie
  • your own Javascript code in the HTML file you want the Uploader in.

NameType
Key features: Some of the key features are (e.g. are not in other upload elements):

  • Unobtrusive: If the user doesn't have JavaScript or Flash available then the Uploader widget will not work. This means that the original file upload elements will be untouched.
  • Callbacks: There are currently 17 callbacks you can use.
  • Limit queue size: You can limit the total size of each upload batch.
  • Multiple file masks: Specify more then 1 file mask the user can select. Each file mask will have it's own file size limit.
  • Progress: In addition to the progress of the current file, this widget also reports other information including speed, processed bytes, remaining bytes and time remaining. Not only for the current file, but also for the entire queue.
  • Responsive: You won't get a "This script is causing your browser..." error.


NameType
Constructor:


NameType
uploader( oUploaderConfig )
Creates new uploader on the nodeset supplied by the query.

Callbacks: The callbacks listed below are placed in such an order that they would appear in a normal application flow.




















NameType
UploaderInitialized( oCallback )
Occurs just after the Flash file was succesfully loaded and initialized. This could be usefull if you would like to change the DOM structure (e.g. hide the original file input elements.)

dialogPreShow( oCallback )
Occurs just before the "choose files" dialog is shown. You could use this opportunity to show a lightbox covering the entire page.

fileAdded( oCallback )
Occurs after files have been selected to be added to the queue.

dialogPostShow( oCallback )
Occurs just after the "choose files" dialog is hidden. You could use this opportunity to hide a lightbox which was covering the entire page.

fileRemoved( oCallback )
Occurs when the user removes a file from the queue. You have to code your own functionality to remove a file from the queue (see the demo's for examples).

queueEmpty( oCallback )
Occors after "queueStarted" and only when the current queue is empty.

queueStarted( oCallback )
Occurs when the uploading of the current queue is started.

fileCancelled( oCallback )
Occurs when a file upload has been cancelled while the file was being uploaded.

queueCancelled( oCallback )
Occurs when the user cancels the complete current queue.

queueCompleted( oCallback )
Occurs when the current queue has been completely processed.

queueErrorCount( oCallback )
Occurs when the file(s) you selected can not be added to the queue anymore (it is full)..

queueErrorSize( oCallback )
Occurs when the file you selected was to big to fit into the queue..

fileStarted( oCallback )
Occurs when the upload of the next (or first) file starts.

fileProgress( oCallback )
Occurs whenever there is some new progress on the current file.

fileCompleted( oCallback )
Occurs after the file has been uploaded to the server. This is only a signal that the file was uploaded. The backend which processes the file can still choke on invalid files and so on!

fileErrorSize( oCallback )
Occurs when the file you selected was to big to upload..

fileErrorSecurity( oCallback )
Occurs when there was a security error.

fileErrorIO( oCallback )
Occurs when the file you selected gave an IO error (e.g. can't be read or something like that).

fileErrorHTTP( oCallback )
Occurs when there was an HTTP error, during the processing of a file.

Public functions: The public functions listed below can be called after you have a handle to the object. To get a handle to the object, you need to know the name of the upload element. After this, you could call the following functions which are exposed from Flash.

var oUploader = jQuery('<name>')[0];

UI/Uploader/public/browse UI/Uploader/public/upload UI/Uploader/public/cancelFile UI/Uploader/public/cancelQueue

NameType
Demos:

NameType