From a61a7e5ece794f355f8dfd09e217a4611a52e88d Mon Sep 17 00:00:00 2001
From: Alan Knowles <alan@roojs.com>
Date: Fri, 5 Mar 2021 16:25:11 +0800
Subject: [PATCH] fix issues with file uploader

---
 Roo/bootstrap/CardUploader.js               | 22 +++++++++++++++------
 docs/src/Roo_bootstrap_CardUploader.js.html | 19 +++++++++++++++---
 2 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/Roo/bootstrap/CardUploader.js b/Roo/bootstrap/CardUploader.js
index 7e57e670d9..8e64291395 100644
--- a/Roo/bootstrap/CardUploader.js
+++ b/Roo/bootstrap/CardUploader.js
@@ -26,7 +26,7 @@ Roo.bootstrap.CardUploader = function(config){
     
     this.fileCollection   = new Roo.util.MixedCollection(false,function(r) {
         return r.data.id
-        });
+     });
     
     
 };
@@ -58,7 +58,7 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input,  {
                 {
                     tag: 'input',
                     type : 'hidden',
-                    nane : this.name,
+                    name : this.name,
                     value : this.value,
                     cls : 'd-none  form-control'
                 },
@@ -190,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
-        })
+        });
         
     },
     
@@ -284,13 +285,18 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input,  {
         // this.items.push(cn);
         this.fileCollection.add(cn);
         
+        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.src);
+        reader.readAsDataURL(data.srcfile);
         
         
         
@@ -301,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();
diff --git a/docs/src/Roo_bootstrap_CardUploader.js.html b/docs/src/Roo_bootstrap_CardUploader.js.html
index 894365db7b..510f8b98fb 100644
--- a/docs/src/Roo_bootstrap_CardUploader.js.html
+++ b/docs/src/Roo_bootstrap_CardUploader.js.html
@@ -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">nane </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">},
@@ -282,7 +283,16 @@
         </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">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.src</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">)
@@ -308,12 +318,15 @@
 
     </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">);
+
+
+
     }
 
 
-- 
2.39.2