Awesome Uploader (Ext JS Component)


This is a 3-in-1 uploader that uses Firefox 3.6+ / Chrome 5+ drag and drop, flash-based swfupload, or a standard HTML file upload field to give the best user experience possible for file uploads.

Features:

Multiple simultaneous uploads (via drag and drop and standard file upload only)
Progress bar (Drag and Drop and Flash based upload only)
Very extensible

The PHP required to handle these uploads (the same code that powers this page) is also included!

The Awesome Uploader detects if flash is available, using swfupload to allow a multiple file selection dialogue. If flash is not available a normal HTML file upload field is used.

Drag and drop uploads use XMLHttpRequest2 and the File API to send files as the raw body of the request. NOTE: This is different from standard multi-part form uploads!
SWFUpload and HTML file uploads use standard multi-part form uploads.

For all uploads, the server response should be a JSON object with a success property. If there is an error, there should also be an "error" property.
If all uploads succeed: {"success":true}
If an upload fails: {"success":false,"error":"Reason for error!"}
Upon failure, the "Reason for error!" part will be displayed in a message box.

If you are using firefox 3.6+ or Chrome 5+, drag a file from your desktop into here:

	var AwesomeUploaderInstance1 = new AwesomeUploader({
		title:'Ext JS Super Uploader'
		,renderTo:'container1'
		,frame:true
		,width:500
		,height:300
	});


	var AwesomeUploaderInstance2 = new Ext.Panel({
		title:'Awesome Uploader via xtype'
		,renderTo:'container2'
		,frame:true
		,width:500
		,height:200
		,items:{
			xtype:'awesomeuploader'
			,gridHeight:100
			,height:160
			,listeners:{
				scope:this
				,fileupload:function(uploader, success, result){
					if(success){
						Ext.Msg.alert('File Uploaded!','A file has been uploaded!');
					}
				}
			}
		}
	});

Configuration Options & Defaults

ConfigurationDefault ValueDescription
awesomeUploaderRoot''Path to all awesomeuploader resources. This is added to beginning of the path of all resources.
maxFileSizeBytes3145728 (3 MiB)Maximum file size in bytes
extraPostData{ }Object of additional post data to send along with upload
NOTE: For drag and drop uploads, extraPostData only works in Firefox 3.6+, and the not-yet-released Chrome 6.

WHY? multipart/form-data uploads (required to add additional parameters) requires the File API, which is only supported by Firefox 3.6 currently.
xhrSendMultiPartFormDatafalseSend multipart/form-data uploads for drag and drop rather than sending the file as the entire request body. Only Firefox 3.6 compatible. See above note.
xhrFilePostName'Filedata'Name of post parameter for drag and drop file upload. Only used if xhrSendMultiPartFormData=true. See above note.
supressPopupsfalseDo not show built-in popups like "This file is too big" or "Error uploading file".
flashButtonHeight'22'Height of flash button
flashButtonWidth'56'Width of flash button
flashButtonSprite'swfupload_browse_button_trans_56x22.PNG'Sprite used for flash button
flashUploadFilePostName'Filedata'POST variable name for flash name
flashSwfUploadPath'swfupload.swf'path to swfupload.swf file
flashSwfUploadFileTypes'*.*'File name mask for file types allowed by swfupload
flashSwfUploadFileTypesDescription'All Files'Description of above mask
flashUploadUrl'upload.php'URL that swfupload should send file to
gridWidth420grid width of file list
gridHeight200grid height of file list
iconStatusAborted'cross.png'icon for aborted status
iconStatusDone'tick.png'icon for done status
iconStatusError'cross.png'icon for error status
iconStatusPending'hourglass.png'icon for pending status
iconStatusSending'loading.gif'icon for sending status
standardUploadFilePostName'Filedata'POST variable name for standard uploader
standardUploadUrl'upload.php'URL that stanard file upload should send file to
xhrFileNameHeader'X-File-Name'Header name used to send file name for drag and drop (XHR2) upload
xhrUploadUrl'xhrupload.php'URL that drag and drop (XHR2) upload should send file to


Events

fileuploadFired after an upload succeeds or fails
fireEvent(Object thisUploader, Bool uploadSuccessful, Object serverResponse)
Bool uploadSuccessful - indicates success or failure of upload
Object serverResponse - response from server. will at minimum have a property "error" if an error occurs
fileselectionerrorFired if a file a selected file is larger than the maxiumum allowed
fireEvent(String message)
"message" will be 'File size exceeds allowed limit.' if drag and drop is the source, or if the File API is available on the standard upload field.
This also fires if the swfupload "file_queue_error_handler" is called. Possible error messages from swfupload include:
'QUEUE LIMIT EXCEEDED'
'FILE EXCEEDS SIZE LIMIT'
'ZERO BYTE FILE'
'INVALID FILETYPE'

Download Awesome Uploader v1.2 (50 Kib)


    Includes all files necessary for this plugin including icons and PHP backend example.

Project History

2010-07-13 v1.2
Renamed config "standardUploadPath" to: "standardUploadUrl" for consistency
Removed config flashSwfUploadFileSizeLimit
added config maxFileSizeBytes
added config extraPostData:{ } to send POST variables along with an upload
    NOTE: Only works in swfupload and standard upload across all browsers
added config supressPopups (Bool) to disable showing messages
added config xhrSendMultiPartFormData (WARNING: Firefox 3.6+ only!)
added config xhrFilePostName (Only works when dragDropSendMultiPartFormData=true)
added event fileSelectionError

2010-07-09 v1.1
    Added "awesomeUploaderRoot" property

2010-07-07 Initial Release v1.0

Released under BSD License



Awesome Uploader

Copyright (c) 2010, Andrew Rymarczyk
All rights reserved.

Redistribution and use in source and minified, compiled or otherwise obfuscated
form, with or without modification, are permitted provided that the following
conditions are met:

  * Redistributions of source code must retain the above copyright notice,
      this list of conditions and the following disclaimer.
  * Redistributions in minified, compiled or otherwise obfuscated form must
      reproduce the above copyright notice, this list of conditions and the
      following disclaimer in the documentation and/or other materials
      provided with the distribution.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.