From 7e3002584cb7fc8681da1d57855309b65749866d Mon Sep 17 00:00:00 2001 From: Alan Date: Wed, 25 Aug 2021 17:27:31 +0800 Subject: [PATCH] fix button upload - due to adding preventDefault on buttons --- Roo/bootstrap/ButtonUploader.js | 30 ++++++++++++++---------------- roojs-bootstrap-debug.js | 30 ++++++++++++++---------------- roojs-bootstrap.js | 10 +++++----- 3 files changed, 33 insertions(+), 37 deletions(-) diff --git a/Roo/bootstrap/ButtonUploader.js b/Roo/bootstrap/ButtonUploader.js index 11403e490b..cd62d87d3b 100644 --- a/Roo/bootstrap/ButtonUploader.js +++ b/Roo/bootstrap/ButtonUploader.js @@ -60,22 +60,12 @@ Roo.extend(Roo.bootstrap.ButtonUploader, Roo.bootstrap.Button, { getAutoCreate : function() { - var im = { - tag: 'input', - type : 'file', - cls : 'd-none roo-card-upload-selector' - - }; - if (this.multiple) { - im.multiple = 'multiple'; - } + return { cls :'div' , cn : [ - Roo.bootstrap.Button.prototype.getAutoCreate.call(this), - im - + Roo.bootstrap.Button.prototype.getAutoCreate.call(this) ] }; @@ -96,10 +86,18 @@ Roo.extend(Roo.bootstrap.ButtonUploader, Roo.bootstrap.Button, { (window.URL && URL.revokeObjectURL && URL) || (window.webkitURL && webkitURL); - - - - this.selectorEl = this.el.select('.roo-card-upload-selector', true).first(); + var im = { + tag: 'input', + type : 'file', + cls : 'd-none roo-card-upload-selector' + + }; + if (this.multiple) { + im.multiple = 'multiple'; + } + this.selectorEl = Roo.get(document.body).createChild(im); // so it does not capture click event for navitem. + + //this.selectorEl = this.el.select('.roo-card-upload-selector', true).first(); this.selectorEl.on('change', this.onFileSelected, this); diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js index 6bddf696b3..8f61342c18 100644 --- a/roojs-bootstrap-debug.js +++ b/roojs-bootstrap-debug.js @@ -2935,22 +2935,12 @@ Roo.extend(Roo.bootstrap.ButtonUploader, Roo.bootstrap.Button, { getAutoCreate : function() { - var im = { - tag: 'input', - type : 'file', - cls : 'd-none roo-card-upload-selector' - - }; - if (this.multiple) { - im.multiple = 'multiple'; - } + return { cls :'div' , cn : [ - Roo.bootstrap.Button.prototype.getAutoCreate.call(this), - im - + Roo.bootstrap.Button.prototype.getAutoCreate.call(this) ] }; @@ -2971,10 +2961,18 @@ Roo.extend(Roo.bootstrap.ButtonUploader, Roo.bootstrap.Button, { (window.URL && URL.revokeObjectURL && URL) || (window.webkitURL && webkitURL); - - - - this.selectorEl = this.el.select('.roo-card-upload-selector', true).first(); + var im = { + tag: 'input', + type : 'file', + cls : 'd-none roo-card-upload-selector' + + }; + if (this.multiple) { + im.multiple = 'multiple'; + } + this.selectorEl = Roo.get(document.body).createChild(im); // so it does not capture click event for navitem. + + //this.selectorEl = this.el.select('.roo-card-upload-selector', true).first(); this.selectorEl.on('change', this.onFileSelected, this); diff --git a/roojs-bootstrap.js b/roojs-bootstrap.js index b12d47e675..e7d2616235 100644 --- a/roojs-bootstrap.js +++ b/roojs-bootstrap.js @@ -132,11 +132,11 @@ Roo.bootstrap.CardFooter=function(A){Roo.bootstrap.CardFooter.superclass.constru // Roo/bootstrap/CardImageTop.js Roo.bootstrap.CardImageTop=function(A){Roo.bootstrap.CardImageTop.superclass.constructor.call(this,A);};Roo.extend(Roo.bootstrap.CardImageTop,Roo.bootstrap.Element,{container_method:'getCardImageTop'}); // Roo/bootstrap/ButtonUploader.js -Roo.bootstrap.ButtonUploader=function(A){Roo.bootstrap.ButtonUploader.superclass.constructor.call(this,A);this.addEvents({'beforeselect':true,'uploaded':true});};Roo.extend(Roo.bootstrap.ButtonUploader,Roo.bootstrap.Button,{errorTimeout:3000,images:false,fileCollection:false,allowBlank:true,multiple:true,getAutoCreate:function(){var im={tag:'input',type:'file',cls:'d-none roo-card-upload-selector'} -;if(this.multiple){im.multiple='multiple';}return {cls:'div',cn:[Roo.bootstrap.Button.prototype.getAutoCreate.call(this),im]};},initEvents:function(){Roo.bootstrap.Button.prototype.initEvents.call(this);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);},onClick:function(e){e.preventDefault();if(this.fireEvent('beforeselect',this)===false){return;}this.selectorEl.dom.click();},onFileSelected:function(e){e.preventDefault(); -if(typeof(this.selectorEl.dom.files)=='undefined'||!this.selectorEl.dom.files.length){return;}var A=Array.prototype.slice.call(this.selectorEl.dom.files);this.selectorEl.dom.value='';this.fireEvent('uploaded',this,A);},reset:function(){this.selectorEl}}); - +Roo.bootstrap.ButtonUploader=function(A){Roo.bootstrap.ButtonUploader.superclass.constructor.call(this,A);this.addEvents({'beforeselect':true,'uploaded':true});};Roo.extend(Roo.bootstrap.ButtonUploader,Roo.bootstrap.Button,{errorTimeout:3000,images:false,fileCollection:false,allowBlank:true,multiple:true,getAutoCreate:function(){return {cls:'div',cn:[Roo.bootstrap.Button.prototype.getAutoCreate.call(this)]} +;},initEvents:function(){Roo.bootstrap.Button.prototype.initEvents.call(this);this.urlAPI=(window.createObjectURL&&window)||(window.URL&&URL.revokeObjectURL&&URL)||(window.webkitURL&&webkitURL);var im={tag:'input',type:'file',cls:'d-none roo-card-upload-selector'} +;if(this.multiple){im.multiple='multiple';}this.selectorEl=Roo.get(document.body).createChild(im);this.selectorEl.on('change',this.onFileSelected,this);},onClick:function(e){e.preventDefault();if(this.fireEvent('beforeselect',this)===false){return;}this.selectorEl.dom.click(); +},onFileSelected:function(e){e.preventDefault();if(typeof(this.selectorEl.dom.files)=='undefined'||!this.selectorEl.dom.files.length){return;}var A=Array.prototype.slice.call(this.selectorEl.dom.files);this.selectorEl.dom.value='';this.fireEvent('uploaded',this,A); +},reset:function(){this.selectorEl}}); // Roo/bootstrap/Img.js Roo.bootstrap.Img=function(A){Roo.bootstrap.Img.superclass.constructor.call(this,A);this.addEvents({"click":true,"load":true});};Roo.extend(Roo.bootstrap.Img,Roo.bootstrap.Component,{imgResponsive:true,border:'',src:'about:blank',href:false,target:false,xsUrl:'',smUrl:'',mdUrl:'',lgUrl:'',backgroundContain:false,getAutoCreate:function(){if(this.src||(!this.xsUrl&&!this.smUrl&&!this.mdUrl&&!this.lgUrl)){return this.createSingleImg(); }var A={tag:'div',cls:'roo-image-responsive-group',cn:[]};var B=this;Roo.each(['xs','sm','md','lg'],function(C){if(!B[C+'Url']){return;}var D={tag:'img',cls:(B.imgResponsive)?'img-responsive':'',html:B.html||A.html,src:B[C+'Url']};D.cls+=' roo-image-responsive-'+C; -- 2.39.2