Merge pull request #16 from ivan-novakov/devel

Merging devel to master - v1.1.1 stuff
ivan-novakov · Nov 5, 2013 · a17d85d · a17d85d
2 parents e8286f4 + aaa396a
commit a17d85d
Show file tree

Hide file tree

Showing 11 changed files with 170 additions and 30 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,6 @@
 public/extjs
 public/_config.php
 docs/generated
+.buildpath
+.project
+.settings
diff --git a/lib/upload/BrowseButton.js b/lib/upload/BrowseButton.js
@@ -28,14 +28,16 @@ Ext.define('Ext.ux.upload.BrowseButton', {
              * Fixing the issue when adding an icon to the button - the text does not render properly. OBSOLETE - from
              * ExtJS v4.1 the internal implementation has changed, there is no button object anymore.
              */
+        	/*
             if (this.iconCls) {
                 // this.button.removeCls('x-btn-icon');
                 // var width = this.button.getWidth();
                 // this.setWidth(width);
             }
+            */
 
             // Allow picking multiple files at once.
-            this.fileInputEl.dom.setAttribute('multiple', '1');
+            this.setMultipleInputAttribute();
 
         }, this);
 
@@ -49,10 +51,23 @@ Ext.define('Ext.ux.upload.BrowseButton', {
         this.callParent(arguments);
     },
 
+    reset : function() {
+        this.callParent(arguments);
+        this.setMultipleInputAttribute();
+    },
+
+    setMultipleInputAttribute : function(inputEl) {
+        inputEl = inputEl || this.fileInputEl;
+        inputEl.dom.setAttribute('multiple', '1');
+    }
+
     // OBSOLETE - the method is not used by the superclass anymore
+    /*
     createFileInput : function() {
         this.callParent(arguments);
         this.fileInputEl.dom.setAttribute('multiple', '1');
     }
+    */
 
-});
+}
+);
diff --git a/lib/upload/ItemGridPanel.js b/lib/upload/ItemGridPanel.js
@@ -52,7 +52,6 @@ Ext.define('Ext.ux.upload.ItemGridPanel', {
                     xtype : 'rownumberer',
                     width : 50
                 }, {
-                    id : 'filename',
                     dataIndex : 'filename',
                     header : this.textFilename,
                     flex : 1

diff --git a/lib/upload/Manager.js b/lib/upload/Manager.js
@@ -14,7 +14,8 @@ Ext.define('Ext.ux.upload.Manager', {
     config : {
         uploader : null,
         uploaderOptions : null,
-        synchronous : true
+        synchronous : true,
+        filenameEncoder: null
     },
 
     DEFAULT_UPLOADER_CLASS : 'Ext.ux.upload.uploader.ExtJsUploader',
@@ -81,7 +82,8 @@ Ext.define('Ext.ux.upload.Manager', {
             Ext.applyIf(uploaderOptions, {
                 success : this.onUploadSuccess,
                 failure : this.onUploadFailure,
-                progress : this.onUploadProgress
+                progress : this.onUploadProgress,
+                filenameEncoder: this.getFilenameEncoder()
             });
 
             this.uploader = Ext.create(uploaderClass, uploaderOptions);

diff --git a/lib/upload/Panel.js b/lib/upload/Panel.js
@@ -100,6 +100,15 @@ Ext.define('Ext.ux.upload.Panel', {
          */
         uploadTimeout : 60000,
 
+        /**
+         * @cfg {Object/String}
+         * 
+         * Encoder object/class used to encode the filename header. Usually used, when the filename
+         * contains non-ASCII characters. If an encoder is used, the server backend has to be
+         * modified accordingly to decode the value.
+         */
+        filenameEncoder : null,
+
         // strings
         textOk : 'OK',
         textUpload : 'Upload',
@@ -236,7 +245,8 @@ Ext.define('Ext.ux.upload.Panel', {
         var uploadManager = Ext.create('Ext.ux.upload.Manager', {
             uploader : this.uploader,
             uploaderOptions : uploaderOptions,
-            synchronous: this.getSynchronous()
+            synchronous : this.getSynchronous(),
+            filenameEncoder : this.getFilenameEncoder()
         });
 
         return uploadManager;
@@ -252,27 +262,28 @@ Ext.define('Ext.ux.upload.Panel', {
     getTopToolbarConfig : function() {
 
         this.browseButton = Ext.create('Ext.ux.upload.BrowseButton', {
-            id : 'button_browse',
+            itemId : 'button_browse',
             buttonText : this.buttonText
         });
         this.browseButton.on('fileselected', this.onFileSelection, this);
 
         return {
             xtype : 'toolbar',
+            itemId : 'topToolbar',
             dock : 'top',
             items : [
                 this.browseButton,
                 '-',
                 {
-                    id : 'button_upload',
+                    itemId : 'button_upload',
                     text : this.textUpload,
                     iconCls : 'ux-mu-icon-action-upload',
                     scope : this,
                     handler : this.onInitUpload
                 },
                 '-',
                 {
-                    id : 'button_abort',
+                    itemId : 'button_abort',
                     text : this.textAbort,
                     iconCls : 'ux-mu-icon-action-abort',
                     scope : this,
@@ -281,15 +292,15 @@ Ext.define('Ext.ux.upload.Panel', {
                 },
                 '->',
                 {
-                    id : 'button_remove_selected',
+                    itemId : 'button_remove_selected',
                     text : this.textRemoveSelected,
                     iconCls : 'ux-mu-icon-action-remove',
                     scope : this,
                     handler : this.onMultipleRemove
                 },
                 '-',
                 {
-                    id : 'button_remove_all',
+                    itemId : 'button_remove_all',
                     text : this.textRemoveAll,
                     iconCls : 'ux-mu-icon-action-remove',
                     scope : this,
@@ -331,7 +342,11 @@ Ext.define('Ext.ux.upload.Panel', {
 
     onUploadComplete : function(manager, queue, errorCount) {
         this.finishUpload();
-        this.stateInit();
+        if (errorCount) {
+            this.stateQueue();
+        } else {
+            this.stateInit();
+        }
         this.fireEvent('uploadcomplete', this, manager, queue.getUploadedItems(), errorCount);
         manager.resetUpload();
     },
@@ -421,19 +436,23 @@ Ext.define('Ext.ux.upload.Panel', {
         this.statusBar.setSelectionMessage(this.queue.getCount(), this.queue.getTotalBytes());
     },
 
-    getButton : function(id) {
-        return Ext.ComponentMgr.get(id);
+    getButton : function(itemId) {
+        var topToolbar = this.getDockedComponent('topToolbar');
+        if (topToolbar) {
+            return topToolbar.getComponent(itemId);
+        }
+        return null;
     },
 
     switchButtons : function(info) {
-        var id;
-        for (id in info) {
-            this.switchButton(id, info[id]);
+        var itemId;
+        for (itemId in info) {
+            this.switchButton(itemId, info[itemId]);
         }
     },
 
-    switchButton : function(id, on) {
-        var button = this.getButton(id);
+    switchButton : function(itemId, on) {
+        var button = this.getButton(itemId);
 
         if (button) {
             if (on) {
@@ -484,4 +503,4 @@ Ext.define('Ext.ux.upload.Panel', {
         });
     }
 
-});
+});
diff --git a/lib/upload/StatusBar.js b/lib/upload/StatusBar.js
@@ -25,7 +25,7 @@ Ext.define('Ext.ux.upload.StatusBar', {
             items : [
                 {
                     xtype : 'tbtext',
-                    id : this.textComponentId,
+                    itemId : this.textComponentId,
                     text : '&nbsp;'
                 }
             ]

diff --git a/lib/upload/header/AbstractFilenameEncoder.js b/lib/upload/header/AbstractFilenameEncoder.js
@@ -0,0 +1,19 @@
+/**
+ * Abstract filename encoder.
+ */
+Ext.define('Ext.ux.upload.header.AbstractFilenameEncoder', {
+
+    config : {},
+
+    type : 'generic',
+
+    contructor : function(config) {
+        this.initConfig(config);
+    },
+
+    encode : function(filename) {},
+
+    getType : function() {
+        return this.type;
+    }
+});
diff --git a/lib/upload/header/Base64FilenameEncoder.js b/lib/upload/header/Base64FilenameEncoder.js
@@ -0,0 +1,15 @@
+/**
+ * Base64 filename encoder - uses the built-in function window.btoa().
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Window.btoa
+ */
+Ext.define('Ext.ux.upload.header.Base64FilenameEncoder', {
+    extend : 'Ext.ux.upload.header.AbstractFilenameEncoder',
+
+    config : {},
+
+    type : 'base64',
+
+    encode : function(filename) {
+        return window.btoa(unescape(encodeURIComponent(filename)));
+    }
+});
diff --git a/lib/upload/uploader/AbstractUploader.js b/lib/upload/uploader/AbstractUploader.js
@@ -73,7 +73,17 @@ Ext.define('Ext.ux.upload.uploader.AbstractUploader', {
          * 
          * Extra headers to be sent with the upload request.
          */
-        extraHeaders : {}
+        extraHeaders : {},
+
+        /**
+         * @cfg {Object/String}
+         * 
+         * Encoder object/class used to encode the filename header. Usually used, when the filename
+         * contains non-ASCII characters.
+         */
+        filenameEncoder : null,
+
+        filenameEncoderHeader : 'X-Filename-Encoder'
     },
 
     /**
@@ -96,8 +106,19 @@ Ext.define('Ext.ux.upload.uploader.AbstractUploader', {
      * @protected
      */
     initHeaders : function(item) {
-        var headers = this.extraHeaders || {};
-        headers[this.filenameHeader] = item.getFilename();
+        var headers = this.extraHeaders || {},
+            filename = item.getFilename();
+
+		/*
+		 * If there is a filename encoder defined - use it to encode the filename
+		 * in the header and set the type of the encoder as an additional header.
+		 */
+        var filenameEncoder = this.initFilenameEncoder();
+        if (filenameEncoder) {
+            filename = filenameEncoder.encode(filename);
+            headers[this.filenameEncoderHeader] = filenameEncoder.getType();
+        }
+        headers[this.filenameHeader] = filename;
         headers[this.sizeHeader] = item.getSize();
         headers[this.typeHeader] = item.getType();
 
@@ -112,16 +133,29 @@ Ext.define('Ext.ux.upload.uploader.AbstractUploader', {
      * 
      * @param {Ext.ux.upload.Item} item
      */
-    uploadItem : function(item) {
-    },
+    uploadItem : function(item) {},
 
     /**
      * @abstract
      * 
      * Aborts the current upload. 
      * **Implement in subclass**
      */
-    abortUpload : function() {
+    abortUpload : function() {},
+
+    /**
+     * @protected
+     */
+    initFilenameEncoder : function() {
+        if (Ext.isString(this.filenameEncoder)) {
+            this.filenameEncoder = Ext.create(this.filenameEncoder);
+        }
+
+        if (Ext.isObject(this.filenameEncoder)) {
+            return this.filenameEncoder;
+        }
+
+        return null;
     }
 
-});
+});
diff --git a/public/app.js b/public/app.js
@@ -51,7 +51,8 @@ Ext.application({
                         var uploadPanel = Ext.create('Ext.ux.upload.Panel', {
                             uploaderOptions : {
                                 url : 'upload.php'
-                            }
+                            },
+                            filenameEncoder : 'Ext.ux.upload.header.Base64FilenameEncoder'
                         });
 
                         var uploadDialog = Ext.create('Ext.ux.upload.Dialog', {
@@ -93,6 +94,30 @@ Ext.application({
                             }
                         }, this);
 
+                        uploadDialog.show();
+                    }
+                }, '-', {
+                    xtype : 'button',
+                    text : 'Dummy upload',
+                    scope : appPanel,
+                    handler : function() {
+
+                        var uploadPanel = Ext.create('Ext.ux.upload.Panel', {
+                            uploader : 'Ext.ux.upload.uploader.DummyUploader'
+                        });
+
+                        var uploadDialog = Ext.create('Ext.ux.upload.Dialog', {
+                            dialogTitle : 'My Upload Dialog',
+                            panel : uploadPanel
+                        });
+
+                        this.mon(uploadDialog, 'uploadcomplete', function(uploadPanel, manager, items, errorCount) {
+                            this.uploadComplete(items);
+                            if (!errorCount) {
+                                uploadDialog.close();
+                            }
+                        }, this);
+
                         uploadDialog.show();
                     }
                 }

diff --git a/public/upload.php b/public/upload.php
@@ -17,9 +17,18 @@
 /*
  * You should check these values for XSS or SQL injection.
  */
+if (!isset($_SERVER['HTTP_X_FILE_NAME'])) {
+    _error('Unknown file name');
+}
+$fileName = $_SERVER['HTTP_X_FILE_NAME'];
+if (isset($_SERVER['HTTP_X_FILENAME_ENCODER']) && 'base64' == $_SERVER['HTTP_X_FILENAME_ENCODER']) {
+    $fileName = base64_decode($fileName);
+}
+$fileName = htmlspecialchars($fileName);
+
 $mimeType = htmlspecialchars($_SERVER['HTTP_X_FILE_TYPE']);
 $size = intval($_SERVER['HTTP_X_FILE_SIZE']);
-$fileName = htmlspecialchars($_SERVER['HTTP_X_FILE_NAME']);
+
 
 $inputStream = fopen('php://input', 'r');
 $outputFilename = $config['upload_dir'] . '/' . $fileName;