Fix #6630 - making upload work with card uploader
authorAlan Knowles <alan@roojs.com>
Mon, 8 Mar 2021 02:25:57 +0000 (10:25 +0800)
committerAlan Knowles <alan@roojs.com>
Mon, 8 Mar 2021 02:25:57 +0000 (10:25 +0800)
Roo/bootstrap/CardUploader.js
css/undoreset.css [new file with mode: 0644]
docs/src/Roo_bootstrap_CardUploader.js.html
roojs-bootstrap-debug.js
roojs-bootstrap.js

index c625b7d..8e64291 100644 (file)
@@ -26,7 +26,7 @@ Roo.bootstrap.CardUploader = function(config){
     
     this.fileCollection   = new Roo.util.MixedCollection(false,function(r) {
         return r.data.id
-        });
+     });
     
     
 };
@@ -58,6 +58,7 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input,  {
                 {
                     tag: 'input',
                     type : 'hidden',
+                    name : this.name,
                     value : this.value,
                     cls : 'd-none  form-control'
                 },
@@ -189,11 +190,12 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input,  {
             id : Roo.bootstrap.CardUploader.ID--,
             is_uploaded : false,
             src : url,
+            srcfile : file,
             title : file.name,
             mimetype : file.type,
             preview : false,
             is_deleted : 0
-        })
+        });
         
     },
     
@@ -251,7 +253,7 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input,  {
             }
             
         ];
-
+        
         var cn = this.addxtype(
             {
                  
@@ -282,7 +284,21 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input,  {
         // dont' really need ot update items.
         // this.items.push(cn);
         this.fileCollection.add(cn);
-        this.updateInput();
+        
+        if (!data.srcfile) {
+            this.updateInput();
+            return;
+        }
+            
+        var _t = this;
+        var reader = new FileReader();
+        reader.addEventListener("load", function() {  
+            data.srcdata =  reader.result;
+            _t.updateInput();
+        });
+        reader.readAsDataURL(data.srcfile);
+        
+        
         
     },
     removeCard : function(id)
@@ -291,16 +307,20 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input,  {
         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.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);
+        this.updateInput();
+
         
     },
     reset: function()
     {
         this.fileCollection.each(function(card) {
-            card.el.dom.parentNode.removeChild(card.el.dom);    
+            if (card.el.dom && card.el.dom.parentNode) {
+                card.el.dom.parentNode.removeChild(card.el.dom);
+            }
         });
         this.fileCollection.clear();
         this.updateInput();
@@ -308,12 +328,15 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input,  {
     
     updateInput : function()
     {
-        var data = [];
+         var data = [];
         this.fileCollection.each(function(e) {
             data.push(e.data);
+            
         });
-        
         this.inputEl().dom.value = JSON.stringify(data);
+        
+        
+        
     }
     
     
diff --git a/css/undoreset.css b/css/undoreset.css
new file mode 100644 (file)
index 0000000..0139afe
--- /dev/null
@@ -0,0 +1,45 @@
+
+.undoreset div, .undoreset span, .undoreset applet, .undoreset object, .undoreset iframe, .undoreset
+h1, .undoreset h2, .undoreset h3, .undoreset h4, .undoreset h5, .undoreset h6, .undoreset p, .undoreset blockquote, .undoreset pre, .undoreset
+a, .undoreset abbr, .undoreset acronym, .undoreset address, .undoreset big, .undoreset cite, .undoreset code, .undoreset
+del, .undoreset dfn, .undoreset em, .undoreset img, .undoreset ins, .undoreset kbd, .undoreset q, .undoreset s, .undoreset samp, .undoreset
+small, .undoreset strike, .undoreset strong, .undoreset sub, .undoreset sup, .undoreset tt, .undoreset var, .undoreset
+b, .undoreset u, .undoreset i, .undoreset center, .undoreset
+dl, .undoreset dt, .undoreset dd, .undoreset ol, .undoreset ul, .undoreset li, .undoreset
+fieldset, .undoreset form, .undoreset label, .undoreset legend, .undoreset
+table, .undoreset caption, .undoreset tbody, .undoreset tfoot, .undoreset thead, .undoreset tr, .undoreset th, .undoreset td, .undoreset
+article, .undoreset aside, .undoreset canvas, .undoreset details, .undoreset embed, .undoreset
+figure, .undoreset figcaption, .undoreset footer, .undoreset header, .undoreset hgroup, .undoreset
+menu, .undoreset nav, .undoreset output, .undoreset ruby, .undoreset section, .undoreset summary, .undoreset time,
+.undoreset mark, .undoreset audio, .undoreset video {
+    margin-bottom: 1em;
+     
+}
+
+/* Strong and em */
+.undoreset strong, .undoreset th { font-weight: bold; }
+.undoreset em, .undoreset address, .undoreset caption, .undoreset cite { font-style: italic; }
+/* Table */
+.undoreset table { display: table; border-spacing: 2px; border-collapse: separate; }
+.undoreset tr { display: table-row; vertical-align: inherit; }
+.undoreset td { display: table-cell; border-spacing: 2px; padding: 2px; vertical-align: inherit; text-align: inherit; padding: 1px; border-collapse: none; }
+.undoreset th { display: table-cell; vertical-align: inherit; font-weight: bold; padding: 1px; border-collapse: none; }
+/* Block Items */
+.undoreset p { display: block; margin: 1em 0; }
+.undoreset blockquote { display: block; margin: 1em 40px; }
+.undoreset address { display: block; font-style: italic; }
+.undoreset center { display: block; text-align: center; }
+/* Headers */
+.undoreset h1 { display: block; font-size: 2em; font-weight: bold; margin: .67em 0; }
+.undoreset h2 { display: block; font-size: 1.5em; font-weight: bold; margin: .83em 0; }
+.undoreset h3 { display: block; font-size: 1.17em; font-weight: bold; margin: 1em 0; }
+.undoreset h4 { display: block; font-weight: bold; margin: 1.33em 0; }
+.undoreset h5 { display: block; font-size: 0.83em; font-weight: bold; margin: 1.67em 0; }
+.undoreset h6 { display: block; font-size: 0.67em; font-weight: bold; margin: 2.33em 0; }
+/* Lists */
+.undoreset ul { display: block;   list-style-type: disc; margin: 1em 0; padding-left: 40px; }
+.undoreset ol { display: block;   list-style-type: decimal; margin: 1em 0; padding-left: 40px; }
+.undoreset li { display: list-item; }
+/* Pre */
+.undoreset pre, .undoreset code { display: block; font-family: Courier New; white-space: pre; margin: 1em 0; }
+
index 894365d..7d4475e 100644 (file)
@@ -26,7 +26,7 @@
 
     </span><span class="jsdoc-var">this.fileCollection   </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.util.MixedCollection</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">) {
         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">r.data.id
-        </span><span class="jsdoc-syntax">});
+     </span><span class="jsdoc-syntax">});
 
 
 };
@@ -58,6 +58,7 @@
                 {
                     </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'input'</span><span class="jsdoc-syntax">,
                     </span><span class="jsdoc-var">type </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'hidden'</span><span class="jsdoc-syntax">,
+                    </span><span class="jsdoc-var">name </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.name</span><span class="jsdoc-syntax">,
                     </span><span class="jsdoc-var">value </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.value</span><span class="jsdoc-syntax">,
                     </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'d-none  form-control'
                 </span><span class="jsdoc-syntax">},
             </span><span class="jsdoc-var">id </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.bootstrap.CardUploader.ID</span><span class="jsdoc-syntax">--,
             </span><span class="jsdoc-var">is_uploaded </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
             </span><span class="jsdoc-var">src </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">url</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">srcfile </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">file</span><span class="jsdoc-syntax">,
             </span><span class="jsdoc-var">title </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">file.name</span><span class="jsdoc-syntax">,
             </span><span class="jsdoc-var">mimetype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">file.type</span><span class="jsdoc-syntax">,
             </span><span class="jsdoc-var">preview </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
             </span><span class="jsdoc-var">is_deleted </span><span class="jsdoc-syntax">: 0
-        })
+        });
 
     },
 
         </span><span class="jsdoc-comment">// dont' really need ot update items.
         // this.items.push(cn);
         </span><span class="jsdoc-var">this.fileCollection.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">);
-        </span><span class="jsdoc-var">this.updateInput</span><span class="jsdoc-syntax">();
+
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">data.srcfile</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-var">this.updateInput</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">_t </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">reader </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">FileReader</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">reader.addEventListener</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;load&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
+            </span><span class="jsdoc-var">data.srcdata </span><span class="jsdoc-syntax">=  </span><span class="jsdoc-var">reader.result</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">_t.updateInput</span><span class="jsdoc-syntax">();
+        });
+        </span><span class="jsdoc-var">reader.readAsDataURL</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">data.srcfile</span><span class="jsdoc-syntax">);
+
+
 
     },
     </span><span class="jsdoc-var">removeCard </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">)
         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">card  </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.fileCollection.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">);
         </span><span class="jsdoc-var">card.data.is_deleted </span><span class="jsdoc-syntax">= 1;
         </span><span class="jsdoc-var">card.data.src </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">/// delete the source - so it reduces size of not uploaded images etc.
-        </span><span class="jsdoc-var">this.fileCollection.remove</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">card</span><span class="jsdoc-syntax">);
-        </span><span class="jsdoc-comment">//this.items = this.items.filter(function(e) { return e != card });
+        //this.fileCollection.remove(card);
+        //this.items = this.items.filter(function(e) { return e != card });
         // dont' really need ot update items.
         </span><span class="jsdoc-var">card.el.dom.parentNode.removeChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">card.el.dom</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.updateInput</span><span class="jsdoc-syntax">();
+
 
     },
     </span><span class="jsdoc-var">reset</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
     {
         </span><span class="jsdoc-var">this.fileCollection.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">card</span><span class="jsdoc-syntax">) {
-            </span><span class="jsdoc-var">card.el.dom.parentNode.removeChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">card.el.dom</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">card.el.dom </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">card.el.dom.parentNode</span><span class="jsdoc-syntax">) {
+                </span><span class="jsdoc-var">card.el.dom.parentNode.removeChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">card.el.dom</span><span class="jsdoc-syntax">);
+            }
         });
         </span><span class="jsdoc-var">this.fileCollection.clear</span><span class="jsdoc-syntax">();
         </span><span class="jsdoc-var">this.updateInput</span><span class="jsdoc-syntax">();
 
     </span><span class="jsdoc-var">updateInput </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
     {
-        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">data </span><span class="jsdoc-syntax">= [];
+         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">data </span><span class="jsdoc-syntax">= [];
         </span><span class="jsdoc-var">this.fileCollection.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) {
             </span><span class="jsdoc-var">data.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e.data</span><span class="jsdoc-syntax">);
-        });
 
+        });
         </span><span class="jsdoc-var">this.inputEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.dom.value </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">JSON.stringify</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">data</span><span class="jsdoc-syntax">);
+
+
+
     }
 
 
index 12493ad..f6d0dbb 100644 (file)
@@ -12496,7 +12496,7 @@ Roo.bootstrap.CardUploader = function(config){
     
     this.fileCollection   = new Roo.util.MixedCollection(false,function(r) {
         return r.data.id
-        });
+     });
     
     
 };
@@ -12528,6 +12528,7 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input,  {
                 {
                     tag: 'input',
                     type : 'hidden',
+                    name : this.name,
                     value : this.value,
                     cls : 'd-none  form-control'
                 },
@@ -12659,11 +12660,12 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input,  {
             id : Roo.bootstrap.CardUploader.ID--,
             is_uploaded : false,
             src : url,
+            srcfile : file,
             title : file.name,
             mimetype : file.type,
             preview : false,
             is_deleted : 0
-        })
+        });
         
     },
     
@@ -12721,7 +12723,7 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input,  {
             }
             
         ];
-
+        
         var cn = this.addxtype(
             {
                  
@@ -12752,7 +12754,21 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input,  {
         // dont' really need ot update items.
         // this.items.push(cn);
         this.fileCollection.add(cn);
-        this.updateInput();
+        
+        if (!data.srcfile) {
+            this.updateInput();
+            return;
+        }
+            
+        var _t = this;
+        var reader = new FileReader();
+        reader.addEventListener("load", function() {  
+            data.srcdata =  reader.result;
+            _t.updateInput();
+        });
+        reader.readAsDataURL(data.srcfile);
+        
+        
         
     },
     removeCard : function(id)
@@ -12761,16 +12777,20 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input,  {
         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.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);
+        this.updateInput();
+
         
     },
     reset: function()
     {
         this.fileCollection.each(function(card) {
-            card.el.dom.parentNode.removeChild(card.el.dom);    
+            if (card.el.dom && card.el.dom.parentNode) {
+                card.el.dom.parentNode.removeChild(card.el.dom);
+            }
         });
         this.fileCollection.clear();
         this.updateInput();
@@ -12778,12 +12798,15 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input,  {
     
     updateInput : function()
     {
-        var data = [];
+         var data = [];
         this.fileCollection.each(function(e) {
             data.push(e.data);
+            
         });
-        
         this.inputEl().dom.value = JSON.stringify(data);
+        
+        
+        
     }
     
     
index 06c388d..5fd0606 100644 (file)
@@ -520,17 +520,18 @@ this.fireEvent("afterremove",this)}},createList:function(){this.list=Roo.get(doc
 }},onHide:function(){var ae=this.getActionEl();ae.dom.style.display='none';},onTriggerClick:Roo.emptyFn});
 // Roo/bootstrap/CardUploader.js
 Roo.bootstrap.CardUploader=function(A){Roo.bootstrap.CardUploader.superclass.constructor.call(this,A);this.fileCollection=new Roo.util.MixedCollection(false,function(r){return r.data.id});};Roo.extend(Roo.bootstrap.CardUploader,Roo.bootstrap.Input,{errorTimeout:3000,images:false,fileCollection:false,allowBlank:true,getAutoCreate:function(){var A={cls:'form-group',cn:[{tag:'label',html:this.fieldLabel}
-,{tag:'input',type:'hidden',value:this.value,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'},{cls:'card-columns roo-card-uploader-container'}
+,{tag:'input',type:'hidden',name:this.name,value:this.value,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'},{cls:'card-columns roo-card-uploader-container'}
 ]};return A;},getChildContainer:function(){return this.containerEl;},getButtonContainer:function(){return this.el.select(".roo-card-uploader-button-container").first();},initEvents:function(){Roo.bootstrap.Input.prototype.initEvents.call(this);var t=this;
 this.addxtype({xns:Roo.bootstrap,xtype:'Button',container_method:'getButtonContainer',html:this.html,cls:'w-100 ',listeners:{'click':function(A,e){t.onClick(e);}}});this.urlAPI=(window.createObjectURL&&window)||(window.URL&&URL.revokeObjectURL&&URL)||(window.webkitURL&&webkitURL);
 this.selectorEl=this.el.select('.roo-card-upload-selector',true).first();this.selectorEl.on('change',this.onFileSelected,this);if(this.images){var t=this;this.images.forEach(function(A){t.addCard(A)});this.images=false;}this.containerEl=this.el.select('.roo-card-uploader-container',true).first();
 },onClick:function(e){e.preventDefault();this.selectorEl.dom.click();},onFileSelected:function(e){e.preventDefault();if(typeof(this.selectorEl.dom.files)=='undefined'||!this.selectorEl.dom.files.length){return;}Roo.each(this.selectorEl.dom.files,function(A){this.addFile(A);
-},this);},addFile:function(A){if(typeof(A)==='string'){throw "Add file by name?";return;}if(!A||!this.urlAPI){return;}var B=this;var C=B.urlAPI.createObjectURL(A);this.addCard({id:Roo.bootstrap.CardUploader.ID--,is_uploaded:false,src:C,title:A.name,mimetype:A.type,preview:false,is_deleted:0}
-)},addCard:function(A){var t=this;var B=[{xns:Roo.bootstrap,xtype:'CardFooter',items:[{xns:Roo.bootstrap,xtype:'Element',cls:'d-flex',items:[{xns:Roo.bootstrap,xtype:'Button',html:String.format("<small>{0}</small>",A.title),cls:'col-11 text-left',size:'sm',weight:'link',fa:'download',listeners:{click:function(){this.downloadCard(A.id)}
+},this);},addFile:function(A){if(typeof(A)==='string'){throw "Add file by name?";return;}if(!A||!this.urlAPI){return;}var B=this;var C=B.urlAPI.createObjectURL(A);this.addCard({id:Roo.bootstrap.CardUploader.ID--,is_uploaded:false,src:C,srcfile:A,title:A.name,mimetype:A.type,preview:false,is_deleted:0}
+);},addCard:function(A){var t=this;var B=[{xns:Roo.bootstrap,xtype:'CardFooter',items:[{xns:Roo.bootstrap,xtype:'Element',cls:'d-flex',items:[{xns:Roo.bootstrap,xtype:'Button',html:String.format("<small>{0}</small>",A.title),cls:'col-11 text-left',size:'sm',weight:'link',fa:'download',listeners:{click:function(){this.downloadCard(A.id)}
 }},{xns:Roo.bootstrap,xtype:'Button',size:'sm',weight:'danger',cls:'col-1',fa:'times',listeners:{click:function(){t.removeCard(A.id)}}}]}]}];var cn=this.addxtype({xns:Roo.bootstrap,xtype:'Card',closeable:true,header:!A.mimetype.match(/image/)&&!A.preview?"Document":false,header_image:A.mimetype.match(/image/)?A.src:A.preview,header_image_fit_square:true,data:A,html:false,items:B,initEvents:function(){Roo.bootstrap.Card.prototype.initEvents.call(this);
-this.imgEl=this.el.select('.card-img-top').first();if(this.imgEl){this.imgEl.on('click',function(){t.previewCard(A.id);},this);this.imgEl.set({'pointer':'cursor'});}}});this.fileCollection.add(cn);this.updateInput();},removeCard:function(id){var A=this.fileCollection.get(id);
-A.data.is_deleted=1;A.data.src='';this.fileCollection.remove(A);A.el.dom.parentNode.removeChild(A.el.dom);},reset:function(){this.fileCollection.each(function(A){A.el.dom.parentNode.removeChild(A.el.dom);});this.fileCollection.clear();this.updateInput();}
-,updateInput:function(){var A=[];this.fileCollection.each(function(e){A.push(e.data);});this.inputEl().dom.value=JSON.stringify(A);}});Roo.bootstrap.CardUploader.ID=-1;
+this.imgEl=this.el.select('.card-img-top').first();if(this.imgEl){this.imgEl.on('click',function(){t.previewCard(A.id);},this);this.imgEl.set({'pointer':'cursor'});}}});this.fileCollection.add(cn);if(!A.srcfile){this.updateInput();return;}var _t=this;var C=new FileReader();
+C.addEventListener("load",function(){A.srcdata=C.result;_t.updateInput();});C.readAsDataURL(A.srcfile);},removeCard:function(id){var A=this.fileCollection.get(id);A.data.is_deleted=1;A.data.src='';A.el.dom.parentNode.removeChild(A.el.dom);this.updateInput();
+},reset:function(){this.fileCollection.each(function(A){if(A.el.dom&&A.el.dom.parentNode){A.el.dom.parentNode.removeChild(A.el.dom);}});this.fileCollection.clear();this.updateInput();},updateInput:function(){var A=[];this.fileCollection.each(function(e){A.push(e.data);
+});this.inputEl().dom.value=JSON.stringify(A);}});Roo.bootstrap.CardUploader.ID=-1;
 // Roo/data/SortTypes.js
 Roo.data.SortTypes={none:function(s){return s;},stripTagsRE:/<\/?[^>]+>/gi,asText:function(s){return String(s).replace(this.stripTagsRE,"");},asUCText:function(s){return String(s).toUpperCase().replace(this.stripTagsRE,"");},asUCString:function(s){return String(s).toUpperCase();
 },asDate:function(s){if(!s){return 0;}if(s instanceof Date){return s.getTime();}return Date.parse(String(s));},asFloat:function(s){var A=parseFloat(String(s).replace(/,/g,""));if(isNaN(A)){A=0;}return A;},asInt:function(s){var A=parseInt(String(s).replace(/,/g,""));