Skip to content

UI.Plupload

Jump to bottom Edit New page
Eegee edited this page Jan 8, 2014 · 16 revisions

Table of Contents

Constructor

### [UI.Plupload(settings)](/moxiecode/plupload/blob/master/src/jquery.ui.plupload/jquery.ui.plupload.js#L22 "Defined at: src/jquery.ui.plupload/jquery.ui.plupload.js:22")

jQuery UI based implementation of the Plupload API - multi-runtime file uploading API.

To use the widget you must include jQuery and jQuery UI bundle (including ui.core, ui.widget, ui.button, ui.progressbar and ui.sortable).

In general the widget is designed the way that you do not usually need to do anything to it after you instantiate it. But! You still can intervenue, to some extent, in case you need to. Although, due to the fact that widget is based on jQuery UI widget factory, there are some specifics. See examples below for more details.

Arguments

  • settings Object
    For detailed information about each option check documentation.
    • url String
      URL of the server-side upload handler.
    • [chunk_size=0] Number|String
      Chunk size in bytes to slice the file into. Shorcuts with b, kb, mb, gb, tb suffixes also supported. e.g. 204800 or "204800b" or "200kb". By default - disabled.
    • [file_data_name="file"] String
      Name for the file field in Multipart formated message.
    • [filters=[] Array
      Set of file type filters, each one defined by hash of title and extensions. e.g. {title : "Image files", extensions : "jpg,jpeg,gif,png"}. Dispatches plupload.FILE_EXTENSION_ERROR
    • [flash_swf_url] String
      URL of the Flash swf.
    • [headers] Object
      Custom headers to send with the upload. Hash of name/value pairs.
    • [max_file_size] Number|String
      Maximum file size that the user can pick, in bytes. Optionally supports b, kb, mb, gb, tb suffixes. e.g. "10mb" or "1gb". By default - not set. Dispatches plupload.FILE_SIZE_ERROR.
    • [max_retries=0] Number
      How many times to retry the chunk or file, before triggering Error event.
    • [multipart=true] Boolean
      Whether to send file and additional parameters as Multipart formated message.
    • [multipart_params] Object
      Hash of key/value pairs to send with every file upload.
    • [multi_selection=true] Boolean
      Enable ability to select multiple files at once in file dialog.
    • [prevent_duplicates=false] Boolean
      Do not let duplicates into the queue. Dispatches plupload.FILE_DUPLICATE_ERROR.
    • [required_features] String|Object
      Either comma-separated list or hash of required features that chosen runtime should absolutely possess.
    • [resize] Object
      Enable resizng of images on client-side. Applies to image/jpeg and image/png only. e.g. {width : 200, height : 200, quality : 90, crop: true}
      • [width] Number
        If image is bigger, it will be resized.
      • [height] Number
        If image is bigger, it will be resized.
      • [quality=90] Number
        Compression quality for jpegs (1-100).
      • [crop=false] Boolean
        Whether to crop images to exact dimensions. By default they will be resized proportionally.
    • [runtimes="html5,flash,silverlight,html4"] String
      Comma separated list of runtimes, that Plupload will try in turn, moving to the next if previous fails.
    • [silverlight_xap_url] String
      URL of the Silverlight xap.
    • [unique_names=false] Boolean
      If true will generate unique filenames for uploaded files.
    • [autostart=false] Boolean
      Whether to auto start uploading right after file selection.
    • [dragdrop=true] Boolean
      Enable ability to add file to the queue by drag'n'dropping them from the desktop.
    • [rename=false] Boolean
      Enable ability to rename files in the queue.
    • [sortable=false] Boolean
      Enable ability to sort files in the queue, changing their uploading priority.
    • [buttons] Object
      Control the visibility of functional buttons.
      • [browse=true] Boolean
        Display browse button.
      • [start=true] Boolean
        Display start button.
      • [stop=true] Boolean
        Display stop button.
    • [views] Object
      Control various views of the file queue.
      • [list=true] Boolean
        Enable list view.
      • [thumbs=false] Boolean
        Enable thumbs view.
      • [default='list'] String
        Default view.
      • [remember=true] Boolean
        Whether to remember the current view (requires jQuery Cookie plugin).
    • [multiple_queues=true] Boolean
      Re-activate the widget after each upload procedure.
    • [max_file_count=0] Number
      Limit the number of files user is able to upload in one go, autosets multiple_queues to false (default is 0 - no limit).

Example ```html

<!-- Instantiating: -->
<div id="uploader">
	<p>Your browser doesn't have Flash, Silverlight or HTML5 support.</p>
</div>

<script>
	$('#uploader').plupload({
		url : '../upload.php',
		filters : [
			{title : "Image files", extensions : "jpg,gif,png"}
		],
		rename: true,
		sortable: true,
		flash_swf_url : '../../js/Moxie.swf',
		silverlight_xap_url : '../../js/Moxie.xap',
	});
</script>
```

```javascript

// Invoking methods:
$('#uploader').plupload(options);

// Display welcome message in the notification area
$('#uploader').plupload('notify', 'info', "This might be obvious, but you need to click 'Add Files' to add some files.");
```

```javascript

// Subscribing to the events...
// ... on initialization:
$('#uploader').plupload({ 
	...
	viewchanged: function(event, args) {
		// stuff ...
	}
});
// ... or after initialization
$('#uploader').on("viewchanged", function(event, args) {
	// stuff ...
});
```
## Methods ### [start()](/moxiecode/plupload/blob/master/src/jquery.ui.plupload/jquery.ui.plupload.js#L612 "Defined at: src/jquery.ui.plupload/jquery.ui.plupload.js:612")

Start upload. Triggers start event.

### [stop()](/moxiecode/plupload/blob/master/src/jquery.ui.plupload/jquery.ui.plupload.js#L623 "Defined at: src/jquery.ui.plupload/jquery.ui.plupload.js:623")

Stop upload. Triggers stop event.

### [enable()](/moxiecode/plupload/blob/master/src/jquery.ui.plupload/jquery.ui.plupload.js#L634 "Defined at: src/jquery.ui.plupload/jquery.ui.plupload.js:634")

Enable browse button.

### [disable()](/moxiecode/plupload/blob/master/src/jquery.ui.plupload/jquery.ui.plupload.js#L645 "Defined at: src/jquery.ui.plupload/jquery.ui.plupload.js:645")

Disable browse button.

### [getFile(id)](/moxiecode/plupload/blob/master/src/jquery.ui.plupload/jquery.ui.plupload.js#L656 "Defined at: src/jquery.ui.plupload/jquery.ui.plupload.js:656")

Retrieve file by its unique id.

Arguments

  • id String
    Unique id of the file
### [getFiles()](/moxiecode/plupload/blob/master/src/jquery.ui.plupload/jquery.ui.plupload.js#L674 "Defined at: src/jquery.ui.plupload/jquery.ui.plupload.js:674")

Return array of files currently in the queue.

### [removeFile(file)](/moxiecode/plupload/blob/master/src/jquery.ui.plupload/jquery.ui.plupload.js#L685 "Defined at: src/jquery.ui.plupload/jquery.ui.plupload.js:685")

Remove the file from the queue.

Arguments

  • file plupload.File|String
    File to remove, might be specified directly or by its unique id
### [clearQueue()](/moxiecode/plupload/blob/master/src/jquery.ui.plupload/jquery.ui.plupload.js#L699 "Defined at: src/jquery.ui.plupload/jquery.ui.plupload.js:699")

Clear the file queue.

### [getUploader()](/moxiecode/plupload/blob/master/src/jquery.ui.plupload/jquery.ui.plupload.js#L709 "Defined at: src/jquery.ui.plupload/jquery.ui.plupload.js:709")

Retrieve internal plupload.Uploader object (usually not required).

### [refresh()](/moxiecode/plupload/blob/master/src/jquery.ui.plupload/jquery.ui.plupload.js#L720 "Defined at: src/jquery.ui.plupload/jquery.ui.plupload.js:720")

Trigger refresh procedure, specifically browse_button re-measure and re-position operations. Might get handy, when UI Widget is placed within the popup, that is constantly hidden and shown again - without calling this method after each show operation, dialog trigger might get displaced and disfunctional.

### [notify(type, message)](/moxiecode/plupload/blob/master/src/jquery.ui.plupload/jquery.ui.plupload.js#L733 "Defined at: src/jquery.ui.plupload/jquery.ui.plupload.js:733")

Display a message in notification area.

Arguments

  • type Enum
    Type of the message, either error or info
  • message String
    The text message to display.
### [destroy()](/moxiecode/plupload/blob/master/src/jquery.ui.plupload/jquery.ui.plupload.js#L763 "Defined at: src/jquery.ui.plupload/jquery.ui.plupload.js:763")

Destroy the widget, the uploader, free associated resources and bring back original html.

## Events ### ready

Dispatched when the widget is initialized and ready.

### selected

Dispatched when file dialog is closed.

### removed

Dispatched when file dialog is closed.

### start

Dispatched when upload is started.

### stop

Dispatched when upload is stopped.

### progress

Dispatched during the upload process.

### uploaded

Dispatched when file is uploaded.

### complete

Dispatched when upload of the whole queue is complete.

### viewchanged

Dispatched when the view is changed, e.g. from list to thumbs or vice versa.

### error

Dispatched when error of some kind is detected.

Add a custom footer

Table of Contents

Clone this wiki locally