From: Alan Knowles Date: Fri, 5 Mar 2021 08:25:25 +0000 (+0800) Subject: fix issues with file uploader X-Git-Url: http://git.roojs.org/?p=roojs1;a=commitdiff_plain;h=5a3275e340ced0da3714ccfe97023f5ccd917455 fix issues with file uploader --- diff --git a/docs/src/Roo_bootstrap_CardUploader.js.html b/docs/src/Roo_bootstrap_CardUploader.js.html index 510f8b98fb..7d4475e3ed 100644 --- a/docs/src/Roo_bootstrap_CardUploader.js.html +++ b/docs/src/Roo_bootstrap_CardUploader.js.html @@ -26,7 +26,7 @@ this.fileCollection = new Roo.util.MixedCollection(false,function(r) { return r.data.id - }); + }); }; @@ -58,7 +58,7 @@ { tag: 'input', type : 'hidden', - nane : this.name, + name : this.name, value : this.value, cls : 'd-none form-control' }, @@ -190,11 +190,12 @@ 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 @@ // 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 @@ 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 }); + //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/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js index fb1bc14ab7..f6d0dbb663 100644 --- a/roojs-bootstrap-debug.js +++ b/roojs-bootstrap-debug.js @@ -12496,7 +12496,7 @@ Roo.bootstrap.CardUploader = function(config){ this.fileCollection = new Roo.util.MixedCollection(false,function(r) { return r.data.id - }); + }); }; @@ -12528,7 +12528,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' }, @@ -12660,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 - }) + }); }, @@ -12754,13 +12755,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); @@ -12771,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(); diff --git a/roojs-bootstrap.js b/roojs-bootstrap.js index 87c5e3635a..5fd0606c14 100644 --- a/roojs-bootstrap.js +++ b/roojs-bootstrap.js @@ -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',nane: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'} +,{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("{0}",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("{0}",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);var _t=this;var C=new FileReader();C.addEventListener("load",function(){A.srcdata=C.result; -_t.updateInput();});C.readAsDataURL(A.src);},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,""));