Awesome Uploader - Drag and Drop / Swfupload / File Field

[carl23934]

Introducting the Awesome Uploader!
Ext JS Component

This uses native drag and drop abilities in Firefox 3.6+ & Chrome 5+ to perform uploads and show upload progress.

Also if you have flash, swfupload will be used to allow multiple file selection and upload progress.

If you do not have flash, a normal file uploader will be used.

http://jsjoy.com/awesomeuploader

There is also a PHP examples for how to handle the uploads.

Released under BSD license!

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 v1.0
Initial Release

[dbassett74]

Nice!

[Stju]

Good JOB!

[Bodom78]

Hey carl23934,

Just wanted to say thanks for the contribution. I must say this is a very nice upload option with the multiple methods.

Looking forward to picking through it

[carl23934]

Thanks for the kind words!

There is at least 1 enhancement in the works.

*Better enforcing file size limits.
-Currently only imposed by swfupload, except there is no indication, it silently fails. This is no good.
-Will add file size limit for drag and drop
-Cannot impose limits for normal file upload unless using a modern browser (FF 3.6+, Chrome 4+) that supports the File API.

[jamar]

Hi,

your awesome uploader seems to be pretty cool and just what i need, but the download link on your blog returns file not found error. So is it possible to download awesome uploader somewhere right now?

Thanks

JM

[carl23934]

Sorry, I fixed the link.

Rant/
This is my first wordpress site, and I'm finding a lot of quirks. Apparently when a link is put in a post, wordpress feels the need to change the url - EVERY TIME!
/Rant

[Dumbledore]

Hi,

how can i send additional parameters?


Bye, Dumbledore


[EDIT]

I add "post_params : this.flashSwfUploadFileParams" to AwesomeUploader.js:

	,initUploader:function(){
			var settings = {
				flash_url: this.flashSwfUploadPath,
				upload_url: this.flashUploadUrl,
				file_size_limit: this.flashSwfUploadFileSizeLimit,
				file_types: this.flashSwfUploadFileTypes,
				file_types_description: this.flashSwfUploadFileTypesDescription,
				file_upload_limit: 100,
				file_queue_limit: 0,
				post_params : this.flashSwfUploadFileParams,
				debug: false,
				button_image_url: this.flashButtonSprite,
				button_width: this.flashButtonWidth,
				button_height: this.flashButtonHeight,
				button_window_mode: 'opaque',
				file_post_name: this.flashUploadFilePostName,
				button_placeholder: this.items.items[0].body.dom,
				file_queued_handler: 			this.swfUploadfileQueued.createDelegate(this),
				file_dialog_complete_handler: 	this.swfUploadFileDialogComplete.createDelegate(this),
				upload_start_handler: 			this.swfUploadUploadStart.createDelegate(this),
				upload_error_handler: 			this.swfUploadUploadError.createDelegate(this),
				upload_progress_handler: 		this.swfUploadUploadProgress.createDelegate(this),
				upload_success_handler: 		this.swfUploadSuccess.createDelegate(this),
				upload_complete_handler: 		this.swfUploadComplete.createDelegate(this),
				minimum_flash_version: '9.0.28',
				swfupload_load_failed_handler: 	this.initStdUpload.createDelegate(this)

			};
			this.swfUploader = new SWFUpload(settings);
	}

After that i can send addtional parameters while upload:

                xtype                   : 'awesomeuploader',
                awesomeUploaderRoot     : '/ux/panels/AwesomeUploader/',
                flashUploadFilePostName : 'Filedata',
                flashSwfUploadFileSizeLimit : '3 MB',
                flashSwfUploadFileTypes : '*.*',
                flashSwfUploadFileTypesDescription : 'All Files',
                flashUploadUrl          : APP.Ctrl.defaults.UploadHandler,
                flashSwfUploadFileParams: {
                    product_id  : '789',
                    info_id     : '123456'
                },
                listeners               : {
                    fileupload : function(uploader, success, result){
                        if(success){
                            Ext.Msg.alert('Files Uploaded!','All file(s) have been uploaded!');
                        }
                    },
                    scope: this
                }

[carl23934]

I think additional parameters is a great idea! I will add your request to the to do list.

Unfortunately there are some other issues to take into account when adding additional POST data.

Your solution will work for files uploaded via swfupload, but for the standard form upload additional form fields need to be added to the DOM.

For drag and drop uploads there is currently no way to send additional parameters directly, but custom headers can be sent. That is why the "xhrFileNameHeader" config is used to send the file name during an upload.

I briefly thought about manually converting the drag and drop to a multi-part form data, but didn't spend enough time on it to perfect it.

All of these changes have been added to v 1.2

[carl23934]

Drag and Drop uploads currently work with firefox and chrome.

I have determined that it is not currently possible to create a "multipart/form-data" uploader for drag and drop that will work with with the current version of chrome (5). The next version of Chrome (6) looks like it will implement the FileReader API, which is required for a "multipart/form" uploader. I will build this functionality for Firefox, but I would prefer not to have two methods used for uploading between two different browsers, so it will be disabled by default.

All of these changes have been added to v 1.2
You can set xhrSendMultiPartFormData:true, which causes the drag and drop uploads to use multipart/form-data when uploading