ivan-novakov/extjs-upload-widget

File upload widget for ExtJS v4

extjs-upload-widget's Issues

Distribute as Sencha Cmd Package

See http://docs.sencha.com/extjs/4.2.0/#!/guide/command_packages

Bad connection failure processing

Missing default connection failure callback.

this.failure is undefined
http://debug.cz/demo/upload/external/upload/uploader/ExtJsUploader.js?_dc=1344919614477
Line 123

Upload using WCF REST API?

Hi Ivan-Novakov
I want to user WCF Rest, not use PHP
what am I doing wrong?

thank you very much!

Option to re-try upload when errors occur

Now, if there are errors during the upload, it is not possible to re-run the upload. You need to add another file to "enable" the upload button.

Add drag and drop support

Hi,

This is a feature request, would be awesome if instead of having the users click on browse, that users could drag the selected files and drop them in the file grid, so have the files added that way, sort of like when you add attachments in gmail.com by drag and drop

Upload really big files

Hi Ivan,

i try to upload files >3GB.

My problem is the max_execution_time of PHP.
After x secounds the upload will abort by the backend.

Have you any suggestion to solve this problem?
Maybe a chunked upload?

My source code:
Backend: https://github.com/agentp/webshelf-file-explorer/blob/master/lib/controller/filesystemcontroller.php#L179
Frontend: https://github.com/agentp/webshelf-file-explorer/blob/master/app/view/UploadWindow.js#L19

I think setting the execution time of php to 2 hours or more is not a good idea.

Restrict the number of async downloads

When using the asynchronous upload, it'll be nice to have an option to restrict the number of concurent uploads.

client side file size check / timeout support / small cleanups

While playing with the FormDataUploader I have seen that it was easy to implement client side file size checking and timeout support. I don't know if this is the most elegant solution, but it seems to work on current Firefox/Chrome (Linux) and on IE 10/11.

Feel free to accept or reject my small contribution.

--- lib/upload/uploader/FormDataUploader.js.orig    2013-11-05 10:06:41.000000000 +0100
+++ lib/upload/uploader/FormDataUploader.js 2013-12-02 15:57:32.347430530 +0100
@@ -5,9 +5,10 @@
 Ext.define('Ext.ux.upload.uploader.FormDataUploader', {
     extend : 'Ext.ux.upload.uploader.AbstractXhrUploader',

-    requires : [
-        'Ext.ux.upload.data.Connection'
-    ],
+    // Is not needed by this uploader implementation
+    // requires : [
+    //     'Ext.ux.upload.data.Connection'
+    // ],

     method : 'POST',
     xhr : null,
@@ -29,6 +30,18 @@
     },

     uploadItem : function(item) {
+        // Client side file size check
+        if (item.getSize() > this.maxFileSize) {
+            var info = {
+                success: false,
+                message: 'File too big',
+                response: null
+            };
+
+            this.fireEvent('uploadfailure', item, info);
+            return;
+        }
+
         var file = item.getFileApiObject();

         item.setUploading();
@@ -53,6 +66,15 @@
         xhr.addEventListener('loadend', loadendhandler, true);
         xhr.upload.addEventListener("progress", progresshandler, true);

+        xhr.timeout = this.timeout;
+
+        var timeouthandler = Ext.Function.bind(this.onTimeOut, this, [
+                item
+            ], true);
+
+        // the third parameter must be false. If true, then IE10/11 ignores the timeout
+        xhr.addEventListener('timeout', timeouthandler, false);
+
         xhr.send(formData);
     },

@@ -68,8 +90,7 @@
      * 
      * A placeholder for the abort procedure.
      */
-    abortXhr : function() {
-    },
+    abortXhr : Ext.emptyFn,

     onLoadEnd : function(event, item) {
         var response = event.target;
@@ -79,5 +100,9 @@
         }

         return this.onUploadSuccess(response, null, item);
+    },
+
+    onTimeOut : function(event, item) {
+        event.target.timedOut = true;
     }
 });
\ No newline at end of file

Two instances of the upload Manager

Using Sencha Architect and while trying to track down why it seemed to loose my url.
I'm overriding the uploader to use the FormDataUploader, as per instructions in Readme.
Both the Dialog and Panel elements both create an instance of the upload.manager.
Panel creating first and the Dialog defaulting back to ExtJsUploader, which was throwing a no url error.

Is this the expected behaviour to create two instances, or should the dialog use the upload manager instance attached to the upload.Panel

Multipart Support

Hi,

For very large files, I doubt sending the whole data in the request body will make it for my use case.
i'm trying to understand how I could hack the ExtJsUploader class so that multipart requests are sent.
Find myself a little bit lost in the Ext.data.Connection docs (http://www.objis.com/formationextjs/lib/extjs-4.0.0/docs/api/Ext.data.Connection.html).

Seems hard to send multipart requests from ext without using forms.
Do you have any idea how this could be supported. Is it possible to wrap Items in form components ??
Any idea appreciated.

The "Browse" button loses the "multiple" attribute

For some reason, after using the "Browse" button once, the associated input loses the multiple="1" attribute and only single file can be selecte.

Remove useless code in ExtJsUploader (onFailure callback)

https://github.com/ivan-novakov/extjs-upload-widget/blob/master/lib/upload/uploader/ExtJsUploader.js#L123

Send additional params in the form uploader

When using the Dialog/Panel you can specify additional params to be sent together with the upload request. The ExtJs uploader sends them as GET params. The form uploader ignores them.

Make Ext.ux.upload.Panel to relay events regarding separate uploaded items

The panel should expose events triggered in the process of uploading a single item:

• itemuploadsuccess
• itemuploadfailure

Current version does not show file properties (script not work at all)

To fix it you should edit Item.js file
find this.fileApiObject
replace to this.config.fileApiObject

IE9 fallback

Would be great if the widget would have a IE9 fallback. When File API is not available you can simply hide the progress indicator.

To check if File API is avialble you can use something like var isProgressAvailable = typeof FileReader !== "undefined"

ExtJS 6 Support

Hi, ivan-novakov:
First, thanks you for the widget

ExtJS has updated to 6, but this widget has many error in ExtJS 6.
If you have time could you update the widget. Thanks very much!

Add the DummyUploader to the example

Add a separate button for the DummyUploader to the included example, just in case someone wants to "test" the widget without having a real backend.

Handle utf-8 encoded filenames properly

The filename is transferred as a HTTP request header. If the filename contains non-ASCII characters, it may cause a problem.
One option is to try to adapt this RFC: http://datatracker.ietf.org/doc/rfc5987/?include_text=1
Another option is to enable base64 encoding for the filename header.

Ext.ux.upload.uploader.AbstractXhrUploader onUploadSuccess

This method checks for reponse.responseText . Shouldn't it check for response.status?

Uploading mulitiple files and synchronous: false

Thank you for writing and sharing this great upload widget. It is a pleasure to read and learn from your code.

While playing around I have found a bug in the function Queue.js -> isLast(). In the asynchronous mode, the callback order ist mostly different from the request order. Therefore you can't finish the upload, if the last queue entry is calling back. I think to finish the upload you need a callback counter, which you have to compare with the number of entries in the queue or with the number of requests.

Here the result of this bug in firebug:

TypeError: this.currentQueue is null

Manager.js: line 177:
if ( this.currentQueue.isLast(item) ) {

More detailed error reporting

Implement flexible and detailed error reporting especially in case of a HTTP error response.

Using Rails Backend gives an error in the rack middleware (invalid byte sequence in UTF-8)

We are trying to use this plugin in our application. We are using Rails on the server side and when the upload request hits the server side, the Rack middleware which parses the request (POST request I guess), is throwing an error invalid byte sequence in UTF-8, in the server side. Any chance it may be due to faulty request made?

Increase default connection timeout to 60 seconds

Default connection timeout is now 6 seconds, which is not enough when uploading larger files and the upload ends with a connection timeout error. So the default timeout should be increased to 60 seconds or more.

Use "itemId" instead of "id" property

Add custom column

Hi,

is it possible to add personal columns in the grid ?
I would like to add a checkbox per file and others params.

Best regards.

Uncaught RangeError: Maximum call stack size exceeded

I'm using ExtJS 4.2.2
When I click browse button, select a files and click OK I received next error:

Uncaught RangeError: Maximum call stack size exceeded

I saw endless firing of event 'fileselected' in BrowseButton.js row 47

this.fireEvent('fileselected', this, files);

I changed it to

                if (files.length != 0) {
                    this.fireEvent('fileselected', this, files);
                }

and example works

File sync uses to 'PUT' method instead of 'POST' in latest version?

I've updated the widget to the latest version (the most recent 'master' commit), but I noticed that the store sync method (when 'Upload' button is clicked) uses 'PUT' which causes the method to fail / behave erratically (e.g. web server may respond with a 500 or a 405, or just fail silently).

Unfortunately I can't seem to locate the particular change in the source (through comparing the latest version that I have vs the latest version).

Upload not working, "no URL specified"

Hi, i encountered this issue:

1. downloaded latest version of widget,
2. embedded in project and loaded
   Ext.Loader.setPath({ "Ext.ux.upload": "path/lib/upload" });
3. created dialog window in project
   var w = Ext.create("Ext.ux.upload.Dialog", { uploadUrl: "api/path"}); w.show();
4. started the app, window showed,
5. chose some items to upload,
6. clicked upload, and then the chrome console threw an error:

Ext.data.Connection.setOptions(): No URL specified

I tried to find a way to fix this, and saw that in your Ext.ux.upload.data.Connection in request function 'this' scope does not have '_url', only empty string in place where it should have my url. If i override the _url there, it works.

Tried another solution with defining upload manager like this:
var uploader = Ext.create('Ext.ux.upload.uploader.ExtJsUploader', { url: "api/path" });
and putting it inside panel:
var panel = Ext.create("Ext.ux.upload.Panel", { uploader: uploader, width: 600, height: 300 });
and then inserting it in Ext.window.Window:
var w = Ext.create("Ext.window.Window", { layout: { type: "vbox" }, items: [panel]}); w.show();
still got the same error. Tried solution above with setting uploadedUrl instead of url, still the same error.
Any solution?

[edit]
Also, i saw something else. Tried to create uploader 'FormDataUploader', like in second example, but still the uploader created default 'ExtJSUploader'. Still with no url inside.

"Ext.util.Observable#addEvents" is deprecated.

Using Ext 5.0.1, you will get the error: "Ext.util.Observable#addEvents" is deprecated.

See this ticket (http://www.sencha.com/forum/showthread.php?198969-Observable-deprecate-addEvents)

"You don't need the addEvents call. The event will get added the first time it's fired, or the first time a listener is added. Whichever comes first."

I just commented out the addEvent calls to make it work.

You can follow their suggested method of documenting the events like so:

/**
 * @event submit
 * @preventable doSubmit
 * Fires upon successful (Ajax-based) form submission
 * @param {Ext.form.Panel} this This FormPanel
 * @param {Object} result The result object as returned by the server
 * @param {Ext.EventObject} e The event object
 */

Demo page code

Hello Ivan,

Seen you demo and its much impressive. Thanks for it. When i want to try that in my website, by downloading all your codes and by running the public/index.html page, Its not working. That will be very useful for me and everyone, if you make a demo folder with the appropriate files and links of the demo. Please make a demo folder and help the newbies of extjs to play in and around on it.

Advance thanks.

Mani