PDA

View Full Version : Awesome Uploader - Drag and Drop / Swfupload / File Field



carl23934
8 Jul 2010, 9:03 AM
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
8 Jul 2010, 10:05 AM
Nice!

Stju
8 Jul 2010, 3:36 PM
Good JOB!

Bodom78
9 Jul 2010, 2:14 AM
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
9 Jul 2010, 6:26 AM
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
11 Jul 2010, 7:42 AM
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
11 Jul 2010, 9:16 AM
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
13 Jul 2010, 2:24 AM
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
13 Jul 2010, 4:49 AM
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
13 Jul 2010, 6:05 AM
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

carl23934
13 Jul 2010, 11:32 AM
v 1.2 released!

dias
3 Aug 2010, 1:10 AM
Hello,

In the uploader when i put a file in the grid the upload starts automatically. I have a form with a awesomeuploader, i need to put files in the grid, but just upload the files when i click in the submit form. Is this possible? If the answer is positive, how is this done...
Another question, the awesomeuploader don't have REMOVE files from grid... Once again, it is possible to implement this, and how?

Thanks in advance,

Paulo

Starfall
6 Aug 2010, 8:26 AM
The AwesomeUploader suffers from two fatal flaws:


Tight component coupling.
Code duplication.

First, I propose dividing the ux into Uploader part and UI part. Saki has done it with his Ext.ux.FileUploader (http://www.sencha.com/forum/showthread.php?29090-Beta-1-Saki-s-FileTree-for-Ext-2.0). This would allow for using the Uploader in a totally different user interface.

Second, I propose merging the common code for handling different types of upload into separate methods.

carl23934
8 Oct 2010, 6:33 AM
I agree that there is tight coupling between the ui and the upload features in this component. That was because I wanted a complete component all in one package. In the future I will make this a bit more decoupled so the uploading features can be used separately from the ui.

I am not sure where I have excessive code duplication. Can you show me where? I spent quite a bit of time to avoid duplication, but there are many similar functions for the various upload features that would have required making one function far too generalized.

talha06
10 Oct 2010, 8:52 AM
great job, thanks for sharing mate!

BlueCamel
21 Dec 2010, 4:15 PM
Has complete testing been done with ExtJS 3.3.1? I plan to download it and try it out but I'm not sure how extensively it has already been tested.

vuv
21 Dec 2010, 4:38 PM
Hi,

Does anyone know the reason the Browse button doesn't display on the dialog where everythig else displays fine? The example on the site works fine.

I'm using Firefox 3.6.13.

Thanks.

carl23934
14 Feb 2011, 8:00 AM
Can you provide more details? I would be glad to help you get up and running.

prometheus
16 Feb 2011, 9:17 AM
It songs really awsome, I have a question about it: what about Linux desktops? Is Firefox for (for eg.) Ubuntu Linux support that d&d technic that the component used?

Thanks for your answer - I'm keep tracking on the thread!

carl23934
25 Feb 2011, 12:10 PM
I'm not really sure to be honest.

From what I understand linux versions of firefox and chrome do not support drag and drop.

I'll do some testing with the latest Ubuntu and see if it works. Stay tuned!

madhuchowdary
1 Apr 2011, 1:27 AM
hi can any one please tell me how can i use this awesome uploder in my application?
iam using IE7 and iam not using PHp , .Net and flash.I need it in pure Extjs.
If i try to run this, in sample example, Browse button is not appearing? Thanks in advance:-/

steffenk
1 Apr 2011, 1:30 AM
for file upload you always need a BE, you can't handle file uploads in ExtJS only, there is no connection from javascript to filesystem!

madhuchowdary
1 Apr 2011, 1:45 AM
hi,thanks for reply.what do you mean by BE?

steffenk
1 Apr 2011, 1:47 AM
BE = Backend, means php or other server applications

madhuchowdary
1 Apr 2011, 1:52 AM
we are using Java and Jsp for that

Cubaza
15 Jul 2011, 3:34 AM
Hi,
I'm using Awesome Uploader on my page and i have one problem. When I'm using drag&drop files are uploading more than one in the same time. Is there any chance to make it one by one?
I'll be very glad for any solutions.

moegal
17 Oct 2011, 5:17 AM
If anyone needs the classic asp version of the xhrupload, here it is:



<%
Response.Buffer = TRUE
Const adSaveCreateNotExist = 1
Const adSaveCreateOverWrite = 2 ' Mode for ADODB.Stream
Const adTypeBinary = 1 ' Binary file is encoded

Dim filename, filepath, savedfile, returnMessage
filename = Request.ServerVariables("HEADER_X-FILE-NAME")
filepath = Server.MapPath("\") & "\ext-3.3.1\examples\AwesomeUploader\uploads\"

On Error Resume Next

Dim objStream

Set objStream = Server.CreateObject("ADODB.Stream")
objStream.Type = adTypeBinary
objStream.Open
objStream.Write Request.BinaryRead(Request.TotalBytes)
objStream.SaveToFile filepath & filename, adSaveCreateNotExist
objStream.Close

Set objStream = Nothing

If Err Then
returnMessage = "{""success"":false,""error"":""That file already exists""}"
Else
returnMessage = "{""success"":true}"
End If

On Error Goto 0
Response.Write(returnMessage)
%>

artak
25 May 2012, 2:10 AM
Hi,

Can anyone help me, I just do everything as explained in example and get only BROWSE button, but no grid after it.

I tried to find where does that grid should be created and rendered, but can't find any grid in all *.js files of AwesomeUploader.

I just copied the whole folder to my ext js folder, and make changes in paths for root and pics.

Thanks in advance,
Best regards,
Artak Hamazaspyan

armandoxxx
5 Oct 2012, 4:02 AM
Hey ...

I need 2 more events .. beforeupload and after upload .. can someone please let me know how to implement these two ?

Kind regards

Armando

ucoxk
10 Feb 2014, 8:42 PM
Hi
Awesome uploader is great but the problem is that flash has some error on sending the session and cookie (in firefox or chrome... except IE), so i found a solution to fix this problem is that sending the sessionID through flash to server and at server, decode sessionID back to session object, but i dunno how to do it in ASP.Net C#. i search on google and every soln point to swfupload.org Forums which does not exists.
Kindly help me what should i do. i m using C# at backend