Roo/bootstrap/CardUploader.js

[roojs1] / Roo / bootstrap / CardUploader.js

diff --git a/Roo/bootstrap/CardUploader.js b/Roo/bootstrap/CardUploader.js
index d847473..d5e87b0 100644 (file)
--- a/Roo/bootstrap/CardUploader.js
+++ b/Roo/bootstrap/CardUploader.js
@@ -23,7 +23,9 @@ Roo.bootstrap.CardUploader = function(config){
     Roo.bootstrap.CardUploader.superclass.constructor.call(this, config);
     
     
-    this.imageCollection  = new Roo.util.MixedCollection(function(r) { return r.data.id });
+    this.fileCollection   = new Roo.util.MixedCollection(false,function(r) {
+        return r.data.id
+        });
     
     
 };
@@ -35,7 +37,8 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input,  {
      
     images : false,
    
-    imageCollection : false,
+    fileCollection : false,
+    allowBlank : true,
     
     getAutoCreate : function()
     {
@@ -43,11 +46,7 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input,  {
         var cfg =  {
             cls :'form-group' ,
             cn : [
-                {
-                    tag : 'i',
-                    cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star',
-                    tooltip : 'This field is required'
-                },
+               
                 {
                     tag: 'label',
                    //cls : 'input-group-addon',
@@ -57,11 +56,18 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input,  {
 
                 {
                     tag: 'input',
-                    id : id,
                     type : 'hidden',
                     value : this.value,
-                    cls : 'd-none'
+                    cls : 'd-none  form-control'
                 },
+                
+                {
+                    tag: 'input',
+                    multiple : 'multiple',
+                    type : 'file',
+                    cls : 'd-none  roo-card-upload-selector'
+                },
+                
                 {
                     cls : 'roo-card-uploader-button-container w-100 mb-2'
                 },
@@ -85,7 +91,7 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input,  {
    
     getButtonContainer : function() /// what children are added to.
     {
-        return this.el;
+        return this.el.select(".roo-card-uploader-button-container").first();
     },
    
     initEvents : function()
@@ -93,16 +99,17 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input,  {
         
         Roo.bootstrap.Input.prototype.initEvents.call(this);
         
+        var t = this;
         this.addxtype({
             xns: Roo.bootstrap,
 
             xtype : 'Button',
             container_method : 'getButtonContainer' ,            
-            title : 'Upload File / Images', // fix changable?
-            cls : 'w-100',
+            html : 'Upload File / Images', // fix changable?
+            cls : 'w-100 ',
             listeners : {
-                'click' : function(e) {
-                    this.onClick(e);
+                'click' : function(btn, e) {
+                    t.onClick(e);
                 }
             }
         })
@@ -186,6 +193,7 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input,  {
             title : file.name,
             mimetype : file.type,
             preview : false,
+            is_deleted : 0
         })
         
     },
@@ -233,7 +241,7 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input,  {
                                 fa : 'times',
                                 listeners : {
                                     click : function() {
-                                        this.removeCard(data.id)
+                                        t.removeCard(data.id)
                                     }
                                 }
                             }
@@ -253,7 +261,7 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input,  {
                 closeable : true,
                 header : !data.mimetype.match(/image/) && !data.preview ? "Document": false,
                 header_image : data.mimetype.match(/image/) ? data.src  : data.preview,
-                header_image_fit_square: true,
+                header_image_fit_square: true, // fixme  - we probably need to use the 'Img' element to do stuff like this.
                 data : data,
                 html : false,
                  
@@ -272,9 +280,41 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input,  {
                 
             }
         );
-        this.items.push(cn);
+        // dont' really need ot update items.
+        // this.items.push(cn);
+        this.fileCollection.add(cn);
+        this.updateInput();
         
+    },
+    removeCard : function(id)
+    {
+        
+        var card  = this.fileCollection.get(id);
+        card.data.is_deleted = 1;
+        card.data.src = ''; /// delete the source - so it reduces size of not uploaded images etc.
+        this.fileCollection.remove(card);
+        //this.items = this.items.filter(function(e) { return e != card });
+        // dont' really need ot update items.
+        card.el.dom.parentNode.removeChild(card.el.dom);
+        
+    },
+    reset: function()
+    {
+        this.fileCollection.each(function(card) {
+            card.el.dom.parentNode.removeChild(card.el.dom);    
+        });
+        this.fileCollection.clear();
+        this.updateInput();
+    },
+    
+    updateInput : function()
+    {
+        var data = [];
+        this.fileCollection.each(function(e) {
+            data.push(e.data);
+        });
         
+        this.inputEl().dom.value = JSON.stringify(data);
     }