try and get ctrl-enter to add a clear all

[roojs1] / Roo / bootstrap / UploadCropbox.js

diff --git a/Roo/bootstrap/UploadCropbox.js b/Roo/bootstrap/UploadCropbox.js
index 8a9f6d1..8749995 100644 (file)
--- a/Roo/bootstrap/UploadCropbox.js
+++ b/Roo/bootstrap/UploadCropbox.js
@@ -15,6 +15,10 @@
  * @cfg {Array} buttons default ['rotateLeft', 'pictureBtn', 'rotateRight']
  * @cfg {Boolean} isDocument (true|false) default false
  * @cfg {String} url action url
+ * @cfg {String} paramName default 'imageUpload'
+ * @cfg {String} method default POST
+ * @cfg {Boolean} loadMask (true|false) default true
+ * @cfg {Boolean} loadingText default 'Loading...'
  * 
  * @constructor
  * Create a new UploadCropbox
@@ -55,7 +59,7 @@ Roo.bootstrap.UploadCropbox = function(config){
          * @event exception
          * Fire when get exception
          * @param {Roo.bootstrap.UploadCropbox} this
-         * @param {Object} options
+         * @param {XMLHttpRequest} xhr
          */
         "exception" : true,
         /**
@@ -98,19 +102,26 @@ Roo.bootstrap.UploadCropbox = function(config){
          */
         "rotate" : true,
         /**
-         * @event exception
-         * Fire when xhr load exception
+         * @event inspect
+         * Fire when inspect the file
          * @param {Roo.bootstrap.UploadCropbox} this
-         * @param {XMLHttpRequest} xhr
+         * @param {Object} file
          */
-        "exception" : true,
+        "inspect" : true,
         /**
          * @event upload
          * Fire when xhr upload the file
          * @param {Roo.bootstrap.UploadCropbox} this
          * @param {Object} data
          */
-        "upload" : true
+        "upload" : true,
+        /**
+         * @event arrange
+         * Fire when arrange the file data
+         * @param {Roo.bootstrap.UploadCropbox} this
+         * @param {Object} formData
+         */
+        "arrange" : true
     });
     
     this.buttons = this.buttons || Roo.bootstrap.UploadCropbox.footer.STANDARD;
@@ -138,6 +149,11 @@ Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component,  {
     buttons : false,
     canvasLoaded : false,
     isDocument : false,
+    method : 'POST',
+    paramName : 'imageUpload',
+    loadMask : true,
+    loadingText : 'Loading...',
+    maskEl : false,
     
     getAutoCreate : function()
     {
@@ -145,16 +161,16 @@ Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component,  {
             tag : 'div',
             cls : 'roo-upload-cropbox',
             cn : [
+                {
+                    tag : 'input',
+                    cls : 'roo-upload-cropbox-selector',
+                    type : 'file'
+                },
                 {
                     tag : 'div',
                     cls : 'roo-upload-cropbox-body',
                     style : 'cursor:pointer',
                     cn : [
-                        {
-                            tag : 'input',
-                            cls : 'roo-upload-cropbox-selector',
-                            type : 'file'
-                        },
                         {
                             tag : 'div',
                             cls : 'roo-upload-cropbox-preview'
@@ -204,6 +220,10 @@ Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component,  {
                 
             }, this);
         }
+        
+        if(this.loadMask){
+            this.maskEl = this.el;
+        }
     },
     
     initEvents : function()
@@ -216,7 +236,6 @@ Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component,  {
         this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
         
         this.selectorEl = this.el.select('.roo-upload-cropbox-selector', true).first();
-        this.selectorEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
         this.selectorEl.hide();
         
         this.previewEl = this.el.select('.roo-upload-cropbox-preview', true).first();
@@ -267,6 +286,8 @@ Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component,  {
             this.bodyEl.on(mousewheel, this.onMouseWheel, this);
             Roo.get(document).on('mouseup', this.onMouseUp, this);
         }
+        
+        this.selectorEl.on('change', this.onFileSelected, this);
     },
     
     reset : function()
@@ -282,6 +303,8 @@ Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component,  {
         this.cropData = false;
         this.notifyEl.dom.innerHTML = this.emptyText;
         
+        this.selectorEl.dom.value = '';
+        
     },
     
     resize : function()
@@ -329,6 +352,22 @@ Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component,  {
         }
     },
     
+    onFileSelected : function(e)
+    {
+        e.preventDefault();
+        
+        if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){
+            return;
+        }
+        
+        var file = this.selectorEl.dom.files[0];
+        
+        if(this.fireEvent('inspect', this, file) != false){
+            this.prepare(file);
+        }
+        
+    },
+    
     trash : function(e)
     {
         this.fireEvent('trash', this);
@@ -357,15 +396,15 @@ Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component,  {
     
     onLoadCanvas : function()
     {   
+        this.imageEl.OriginWidth = this.imageEl.naturalWidth || this.imageEl.width;
+        this.imageEl.OriginHeight = this.imageEl.naturalHeight || this.imageEl.height;
+        
         this.bodyEl.un('click', this.beforeSelectFile, this);
         
         this.notifyEl.hide();
         this.thumbEl.show();
         this.footerEl.show();
         
-        this.imageEl.OriginWidth = this.imageEl.naturalWidth || this.imageEl.width;
-        this.imageEl.OriginHeight = this.imageEl.naturalHeight || this.imageEl.height;
-        
         this.baseRotateLevel();
         
         if(this.isDocument){
@@ -382,6 +421,10 @@ Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component,  {
         
         this.canvasLoaded = true;
         
+        if(this.loadMask){
+            this.maskEl.unmask();
+        }
+        
     },
     
     setCanvasPosition : function()
@@ -946,7 +989,11 @@ Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component,  {
         
         this.cropData = canvas.toDataURL(this.cropType);
         
-        this.fireEvent('crop', this, this.cropData);
+        if(this.fireEvent('crop', this, this.cropData) !== false){
+            this.process(this.file, this.cropData);
+        }
+        
+        return;
         
     },
     
@@ -1179,12 +1226,12 @@ Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component,  {
     
     process : function(file, crop)
     {
-        this.xhr = new XMLHttpRequest();
-        
-        if(typeof(file.id) != 'undefined' && file.id * 1 > 0){
-            return;
+        if(this.loadMask){
+            this.maskEl.mask(this.loadingText);
         }
         
+        this.xhr = new XMLHttpRequest();
+        
         file.xhr = this.xhr;
 
         this.xhr.open(this.method, this.url, true);
@@ -1222,15 +1269,29 @@ Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component,  {
             formData.append('crop', crop);
         }
         
-        formData.append(this.paramName, file, file.name);
+        if(typeof(file) != 'undefined' && (typeof(file.id) == 'undefined' || file.id * 1 < 1)){
+            formData.append(this.paramName, file, file.name);
+        }
+        
+        if(typeof(file.filename) != 'undefined'){
+            formData.append('filename', file.filename);
+        }
+        
+        if(typeof(file.mimetype) != 'undefined'){
+            formData.append('mimetype', file.mimetype);
+        }
         
-        if(this.fireEvent('prepare', this, formData) != false){
+        if(this.fireEvent('arrange', this, formData) != false){
             this.xhr.send(formData);
         };
     },
     
     xhrOnLoad : function(xhr)
     {
+        if(this.loadMask){
+            this.maskEl.unmask();
+        }
+        
         if (xhr.readyState !== 4) {
             this.fireEvent('exception', this, xhr);
             return;
@@ -1251,6 +1312,10 @@ Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component,  {
     
     xhrOnError : function()
     {
+        if(this.loadMask){
+            this.maskEl.unmask();
+        }
+        
         Roo.log('xhr on error');
         
         var response = Roo.decode(xhr.responseText);
@@ -1261,6 +1326,10 @@ Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component,  {
     
     prepare : function(file)
     {   
+        if(this.loadMask){
+            this.maskEl.mask(this.loadingText);
+        }
+        
         this.file = false;
         this.exif = {};