primevue/fileupload/fileupload.cjs.min.js

[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [![Discord Chat](https://img.shields.io/discord/55794023

"use strict";var e=require("primevue/button"),t=require("primevue/progressbar"),i=require("primevue/message"),l=require("primevue/utils"),o=require("primevue/ripple"),s=require("vue");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=a(e),r=a(t),d=a(i),p=a(o),u={emits:["select","uploader","before-upload","progress","upload","error","before-send","clear"],props:{name:{type:String,default:null},url:{type:String,default:null},mode:{type:String,default:"advanced"},multiple:{type:Boolean,default:!1},accept:{type:String,default:null},disabled:{type:Boolean,default:!1},auto:{type:Boolean,default:!1},maxFileSize:{type:Number,default:null},invalidFileSizeMessage:{type:String,default:"{0}: Invalid file size, file size should be smaller than {1}."},fileLimit:{type:Number,default:null},invalidFileLimitMessage:{type:String,default:"Maximum number of files exceeded, limit is {0} at most."},withCredentials:{type:Boolean,default:!1},previewWidth:{type:Number,default:50},chooseLabel:{type:String,default:null},uploadLabel:{type:String,default:null},cancelLabel:{type:String,default:null},customUpload:{type:Boolean,default:!1},showUploadButton:{type:Boolean,default:!0},showCancelButton:{type:Boolean,default:!0}},duplicateIEEvent:!1,data:()=>({uploadedFileCount:0,files:[],messages:[],focused:!1,progress:null}),methods:{onFileSelect(e){if("drop"!==e.type&&this.isIE11()&&this.duplicateIEEvent)return void(this.duplicateIEEvent=!1);this.messages=[],this.files=this.files||[];let t=e.dataTransfer?e.dataTransfer.files:e.target.files;for(let e of t)this.isFileSelected(e)||this.validate(e)&&(this.isImage(e)&&(e.objectURL=window.URL.createObjectURL(e)),this.files.push(e));this.$emit("select",{originalEvent:e,files:this.files}),this.fileLimit&&this.checkFileLimit(),this.auto&&this.hasFiles&&!this.isFileLimitExceeded()&&this.upload(),"drop"!==e.type&&this.isIE11()?this.clearIEInput():this.clearInputElement()},choose(){this.$refs.fileInput.click()},upload(){if(this.customUpload)this.fileLimit&&(this.uploadedFileCount+=this.files.length),this.$emit("uploader",{files:this.files});else{let e=new XMLHttpRequest,t=new FormData;this.$emit("before-upload",{xhr:e,formData:t});for(let e of this.files)t.append(this.name,e,e.name);e.upload.addEventListener("progress",(e=>{e.lengthComputable&&(this.progress=Math.round(100*e.loaded/e.total)),this.$emit("progress",{originalEvent:e,progress:this.progress})})),e.onreadystatechange=()=>{4===e.readyState&&(this.progress=0,e.status>=200&&e.status<300?(this.fileLimit&&(this.uploadedFileCount+=this.files.length),this.$emit("upload",{xhr:e,files:this.files})):this.$emit("error",{xhr:e,files:this.files}),this.clear())},e.open("POST",this.url,!0),this.$emit("before-send",{xhr:e,formData:t}),e.withCredentials=this.withCredentials,e.send(t)}},clear(){this.files=[],this.messages=null,this.$emit("clear"),this.isAdvanced&&this.clearInputElement()},onFocus(){this.focused=!0},onBlur(){this.focused=!1},isFileSelected(e){if(this.files&&this.files.length)for(let t of this.files)if(t.name+t.type+t.size===e.name+e.type+e.size)return!0;return!1},isIE11:()=>!!window.MSInputMethodContext&&!!document.documentMode,validate(e){return!(this.maxFileSize&&e.size>this.maxFileSize)||(this.messages.push(this.invalidFileSizeMessage.replace("{0}",e.name).replace("{1}",this.formatSize(this.maxFileSize))),!1)},onDragEnter(e){this.disabled||(e.stopPropagation(),e.preventDefault())},onDragOver(){this.disabled||(l.DomHandler.addClass(this.$refs.content,"p-fileupload-highlight"),event.stopPropagation(),event.preventDefault())},onDragLeave(){this.disabled||l.DomHandler.removeClass(this.$refs.content,"p-fileupload-highlight")},onDrop(){if(!this.disabled){l.DomHandler.removeClass(this.$refs.content,"p-fileupload-highlight"),event.stopPropagation(),event.preventDefault();const e=event.dataTransfer?event.dataTransfer.files:event.target.files;(this.multiple||e&&1===e.length)&&this.onFileSelect(event)}},onBasicUploaderClick(){this.hasFiles?this.upload():this.$refs.fileInput.click()},remove(e){this.clearInputElement(),this.files.splice(e,1),this.files=[...this.files]},isImage:e=>/^image\//.test(e.type),clearInputElement(){this.$refs.fileInput.value=""},clearIEInput(){this.$refs.fileInput&&(this.duplicateIEEvent=!0,this.$refs.fileInput.value="")},formatSize(e){if(0===e)return"0 B";let t=Math.floor(Math.log(e)/Math.log(1e3));return parseFloat((e/Math.pow(1e3,t)).toFixed(3))+" "+["B","KB","MB","GB","TB","PB","EB","ZB","YB"][t]},isFileLimitExceeded(){return this.fileLimit&&this.fileLimit<=this.files.length+this.uploadedFileCount&&this.focused&&(this.focused=!1),this.fileLimit&&this.fileLimit<this.files.length+this.uploadedFileCount},checkFileLimit(){this.isFileLimitExceeded()&&this.messages.push(this.invalidFileLimitMessage.replace("{0}",this.fileLimit.toString()))}},computed:{isAdvanced(){return"advanced"===this.mode},isBasic(){return"basic"===this.mode},advancedChooseButtonClass(){return["p-button p-component p-fileupload-choose",{"p-disabled":this.disabled,"p-focus":this.focused}]},basicChooseButtonClass(){return["p-button p-component p-fileupload-choose",{"p-fileupload-choose-selected":this.hasFiles,"p-disabled":this.disabled,"p-focus":this.focused}]},basicChooseButtonIconClass(){return["p-button-icon p-button-icon-left pi",{"pi-plus":!this.hasFiles||this.auto,"pi-upload":this.hasFiles&&!this.auto}]},basicChooseButtonLabel(){return this.auto?this.chooseButtonLabel:this.hasFiles?this.files[0].name:this.chooseButtonLabel},hasFiles(){return this.files&&this.files.length>0},chooseDisabled(){return this.disabled||this.fileLimit&&this.fileLimit<=this.files.length+this.uploadedFileCount},uploadDisabled(){return this.disabled||!this.hasFiles},cancelDisabled(){return this.disabled||!this.hasFiles},chooseButtonLabel(){return this.chooseLabel||this.$primevue.config.locale.choose},uploadButtonLabel(){return this.uploadLabel||this.$primevue.config.locale.upload},cancelButtonLabel(){return this.cancelLabel||this.$primevue.config.locale.cancel}},components:{FileUploadButton:n.default,FileUploadProgressBar:r.default,FileUploadMessage:d.default},directives:{ripple:p.default}};const c={key:0,class:"p-fileupload p-fileupload-advanced p-component"},h={class:"p-fileupload-buttonbar"},f=s.createVNode("span",{class:"p-button-icon p-button-icon-left pi pi-fw pi-plus"},null,-1),m={class:"p-button-label"},g={key:1,class:"p-fileupload-files"},b={key:2,class:"p-fileupload-empty"},v={key:1,class:"p-fileupload p-fileupload-basic p-component"},B={class:"p-button-label"};!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var l=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===i&&l.firstChild?l.insertBefore(o,l.firstChild):l.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("\n.p-fileupload-content {\n    position: relative;\n}\n.p-fileupload-row {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-fileupload-row > div {\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\n            flex: 1 1 auto;\n    width: 25%;\n}\n.p-fileupload-row > div:last-child {\n    text-align: right;\n}\n.p-fileupload-content .p-progressbar {\n    width: 100%;\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n.p-button.p-fileupload-choose {\n    position: relative;\n    overflow: hidden;\n}\n.p-button.p-fileupload-choose input[type=file] {\n    display: none;\n}\n.p-fileupload-choose.p-fileupload-choose-selected input[type=file] {\n    display: none;\n}\n.p-fluid .p-fileupload .p-button {\n    width: auto;\n}\n"),u.render=function(e,t,i,l,o,a){const n=s.resolveComponent("FileUploadButton"),r=s.resolveComponent("FileUploadProgressBar"),d=s.resolveComponent("FileUploadMessage"),p=s.resolveDirective("ripple");return a.isAdvanced?(s.openBlock(),s.createBlock("div",c,[s.createVNode("div",h,[s.withDirectives(s.createVNode("span",{class:a.advancedChooseButtonClass,onClick:t[2]||(t[2]=(...e)=>a.choose&&a.choose(...e)),onKeydown:t[3]||(t[3]=s.withKeys(((...e)=>a.choose&&a.choose(...e)),["enter"])),onFocus:t[4]||(t[4]=(...e)=>a.onFocus&&a.onFocus(...e)),onBlur:t[5]||(t[5]=(...e)=>a.onBlur&&a.onBlur(...e)),tabindex:"0"},[s.createVNode("input",{ref:"fileInput",type:"file",onChange:t[1]||(t[1]=(...e)=>a.onFileSelect&&a.onFileSelect(...e)),multiple:i.multiple,accept:i.accept,disabled:a.chooseDisabled},null,40,["multiple","accept","disabled"]),f,s.createVNode("span",m,s.toDisplayString(a.chooseButtonLabel),1)],34),[[p]]),i.showUploadButton?(s.openBlock(),s.createBlock(n,{key:0,label:a.uploadButtonLabel,icon:"pi pi-upload",onClick:a.upload,disabled:a.uploadDisabled},null,8,["label","onClick","disabled"])):s.createCommentVNode("",!0),i.showCancelButton?(s.openBlock(),s.createBlock(n,{key:1,label:a.cancelButtonLabel,icon:"pi pi-times",onClick:a.clear,disabled:a.cancelDisabled},null,8,["label","onClick","disabled"])):s.createCommentVNode("",!0)]),s.createVNode("div",{ref:"content",class:"p-fileupload-content",onDragenter:t[6]||(t[6]=(...e)=>a.onDragEnter&&a.onDragEnter(...e)),onDragover:t[7]||(t[7]=(...e)=>a.onDragOver&&a.onDragOver(...e)),onDragleave:t[8]||(t[8]=(...e)=>a.onDragLeave&&a.onDragLeave(...e)),onDrop:t[9]||(t[9]=(...e)=>a.onDrop&&a.onDrop(...e))},[a.hasFiles?(s.openBlock(),s.createBlock(r,{key:0,value:o.progress},null,8,["value"])):s.createCommentVNode("",!0),(s.openBlock(!0),s.createBlock(s.Fragment,null,s.renderList(o.messages,(e=>(s.openBlock(),s.createBlock(d,{severity:"error",key:e},{default:s.withCtx((()=>[s.createTextVNode(s.toDisplayString(e),1)])),_:2},1024)))),128)),a.hasFiles?(s.openBlock(),s.createBlock("div",g,[(s.openBlock(!0),s.createBlock(s.Fragment,null,s.renderList(o.files,((e,t)=>(s.openBlock(),s.createBlock("div",{class:"p-fileupload-row",key:e.name+e.type+e.size},[s.createVNode("div",null,[a.isImage(e)?(s.openBlock(),s.createBlock("img",{key:0,role:"presentation",alt:e.name,src:e.objectURL,width:i.previewWidth},null,8,["alt","src","width"])):s.createCommentVNode("",!0)]),s.createVNode("div",null,s.toDisplayString(e.name),1),s.createVNode("div",null,s.toDisplayString(a.formatSize(e.size)),1),s.createVNode("div",null,[s.createVNode(n,{type:"button",icon:"pi pi-times",onClick:e=>a.remove(t)},null,8,["onClick"])])])))),128))])):s.createCommentVNode("",!0),e.$slots.empty&&!a.hasFiles?(s.openBlock(),s.createBlock("div",b,[s.renderSlot(e.$slots,"empty")])):s.createCommentVNode("",!0)],544)])):a.isBasic?(s.openBlock(),s.createBlock("div",v,[(s.openBlock(!0),s.createBlock(s.Fragment,null,s.renderList(o.messages,(e=>(s.openBlock(),s.createBlock(d,{severity:"error",key:e},{default:s.withCtx((()=>[s.createTextVNode(s.toDisplayString(e),1)])),_:2},1024)))),128)),s.withDirectives(s.createVNode("span",{class:a.basicChooseButtonClass,onMouseup:t[13]||(t[13]=(...e)=>a.onBasicUploaderClick&&a.onBasicUploaderClick(...e)),onKeydown:t[14]||(t[14]=s.withKeys(((...e)=>a.choose&&a.choose(...e)),["enter"])),onFocus:t[15]||(t[15]=(...e)=>a.onFocus&&a.onFocus(...e)),onBlur:t[16]||(t[16]=(...e)=>a.onBlur&&a.onBlur(...e)),tabindex:"0"},[s.createVNode("span",{class:a.basicChooseButtonIconClass},null,2),s.createVNode("span",B,s.toDisplayString(a.basicChooseButtonLabel),1),a.hasFiles?s.createCommentVNode("",!0):(s.openBlock(),s.createBlock("input",{key:0,ref:"fileInput",type:"file",accept:i.accept,disabled:i.disabled,onChange:t[10]||(t[10]=(...e)=>a.onFileSelect&&a.onFileSelect(...e)),onFocus:t[11]||(t[11]=(...e)=>a.onFocus&&a.onFocus(...e)),onBlur:t[12]||(t[12]=(...e)=>a.onBlur&&a.onBlur(...e))},null,40,["accept","disabled"]))],34),[[p]])])):s.createCommentVNode("",!0)},module.exports=u;