primevue/fileupload/fileupload.min.js

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

this.primevue=this.primevue||{},this.primevue.fileupload=function(e,l,t,i,s,o,a,n,r,d){"use strict";function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=p(e),u=p(l),h=p(t),f=p(i),m=p(s),g=p(o),v=p(a),b=p(r),B={emits:["remove"],props:{files:{type:Array,default:()=>[]},badgeSeverity:{type:String,default:"warning"},badgeValue:{type:String,default:null},previewWidth:{type:Number,default:50},templates:{type:null,default:null}},methods:{formatSize(e){if(0===e)return"0 B";let l=Math.floor(Math.log(e)/Math.log(1e3));return parseFloat((e/Math.pow(1e3,l)).toFixed(3))+" "+["B","KB","MB","GB","TB","PB","EB","ZB","YB"][l]}},components:{FileUploadButton:c.default,FileUploadBadge:b.default,TimesIcon:h.default}};const y=["alt","src","width"],F={class:"p-fileupload-file-details"},C={class:"p-fileupload-file-name"},k={class:"p-fileupload-file-size"},S={class:"p-fileupload-file-actions"};B.render=function(e,l,t,i,s,o){const a=d.resolveComponent("FileUploadBadge"),n=d.resolveComponent("TimesIcon"),r=d.resolveComponent("FileUploadButton");return d.openBlock(!0),d.createElementBlock(d.Fragment,null,d.renderList(t.files,((l,i)=>(d.openBlock(),d.createElementBlock("div",{key:l.name+l.type+l.size,class:"p-fileupload-file"},[d.createElementVNode("img",{role:"presentation",class:"p-fileupload-file-thumbnail",alt:l.name,src:l.objectURL,width:t.previewWidth},null,8,y),d.createElementVNode("div",F,[d.createElementVNode("div",C,d.toDisplayString(l.name),1),d.createElementVNode("span",k,d.toDisplayString(o.formatSize(l.size)),1),d.createVNode(a,{value:t.badgeValue,class:"p-fileupload-file-badge",severity:t.badgeSeverity},null,8,["value","severity"])]),d.createElementVNode("div",S,[d.createVNode(r,{onClick:l=>e.$emit("remove",i),text:"",rounded:"",severity:"danger",class:"p-fileupload-file-remove"},{icon:d.withCtx((e=>[t.templates.fileremoveicon?(d.openBlock(),d.createBlock(d.resolveDynamicComponent(t.templates.fileremoveicon),{key:0,class:d.normalizeClass(e.class),file:l,index:i},null,8,["class","file","index"])):(d.openBlock(),d.createBlock(n,{key:1,class:d.normalizeClass(e.class),"aria-hidden":"true"},null,8,["class"]))])),_:2},1032,["onClick"])])])))),128)};var L={name:"FileUpload",emits:["select","uploader","before-upload","progress","upload","error","before-send","clear","remove","remove-uploaded-file"],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}."},invalidFileTypeMessage:{type:String,default:"{0}: Invalid file type, allowed file types: {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},chooseIcon:{type:String,default:void 0},uploadIcon:{type:String,default:void 0},cancelIcon:{type:String,default:void 0},style:null,class:null},duplicateIEEvent:!1,data:()=>({uploadedFileCount:0,files:[],messages:[],focused:!1,progress:null,uploadedFiles:[]}),methods:{onFileSelect(e){if("drop"!==e.type&&this.isIE11()&&this.duplicateIEEvent)return void(this.duplicateIEEvent=!1);this.messages=[],this.files=this.files||[];let l=e.dataTransfer?e.dataTransfer.files:e.target.files;for(let e of l)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}),this.clear();else{let e=new XMLHttpRequest,l=new FormData;this.$emit("before-upload",{xhr:e,formData:l});for(let e of this.files)l.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.uploadedFiles.push(...this.files),this.clear())},e.open("POST",this.url,!0),this.$emit("before-send",{xhr:e,formData:l}),e.withCredentials=this.withCredentials,e.send(l)}},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 l of this.files)if(l.name+l.type+l.size===e.name+e.type+e.size)return!0;return!1},isIE11:()=>!!window.MSInputMethodContext&&!!document.documentMode,validate(e){return this.accept&&!this.isFileTypeValid(e)?(this.messages.push(this.invalidFileTypeMessage.replace("{0}",e.name).replace("{1}",this.accept)),!1):!(this.maxFileSize&&e.size>this.maxFileSize)||(this.messages.push(this.invalidFileSizeMessage.replace("{0}",e.name).replace("{1}",this.formatSize(this.maxFileSize))),!1)},isFileTypeValid(e){let l=this.accept.split(",").map((e=>e.trim()));for(let t of l){if(this.isWildcard(t)?this.getTypeClass(e.type)===this.getTypeClass(t):e.type==t||this.getFileExtension(e).toLowerCase()===t.toLowerCase())return!0}return!1},getTypeClass:e=>e.substring(0,e.indexOf("/")),isWildcard:e=>-1!==e.indexOf("*"),getFileExtension:e=>"."+e.name.split(".").pop(),isImage:e=>/^image\//.test(e.type),onDragEnter(e){this.disabled||(e.stopPropagation(),e.preventDefault())},onDragOver(e){this.disabled||(n.DomHandler.addClass(this.$refs.content,"p-fileupload-highlight"),e.stopPropagation(),e.preventDefault())},onDragLeave(){this.disabled||n.DomHandler.removeClass(this.$refs.content,"p-fileupload-highlight")},onDrop(e){if(!this.disabled){n.DomHandler.removeClass(this.$refs.content,"p-fileupload-highlight"),e.stopPropagation(),e.preventDefault();const l=e.dataTransfer?e.dataTransfer.files:e.target.files;(this.multiple||l&&1===l.length)&&this.onFileSelect(e)}},onBasicUploaderClick(){this.hasFiles?this.upload():this.$refs.fileInput.click()},remove(e){this.clearInputElement();let l=this.files.splice(e,1)[0];this.files=[...this.files],this.$emit("remove",{file:l,files:this.files})},removeUploadedFile(e){let l=this.uploadedFiles.splice(e,1)[0];this.uploadedFiles=[...this.uploadedFiles],this.$emit("remove-uploaded-file",{file:l,files:this.uploadedFiles})},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 l=Math.floor(Math.log(e)/Math.log(1e3));return parseFloat((e/Math.pow(1e3,l)).toFixed(3))+" "+["B","KB","MB","GB","TB","PB","EB","ZB","YB"][l]},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()))},onMessageClose(){this.messages=null}},computed:{isAdvanced(){return"advanced"===this.mode},isBasic(){return"basic"===this.mode},advancedChooseButtonClass(){return["p-button p-component p-fileupload-choose",this.class,{"p-disabled":this.disabled,"p-focus":this.focused}]},basicChooseButtonClass(){return["p-button p-component p-fileupload-choose",this.class,{"p-fileupload-choose-selected":this.hasFiles,"p-disabled":this.disabled,"p-focus":this.focused}]},basicChooseButtonLabel(){return this.auto?this.chooseButtonLabel:this.hasFiles?this.files.map((e=>e.name)).join(", "):this.chooseButtonLabel},hasFiles(){return this.files&&this.files.length>0},hasUploadedFiles(){return this.uploadedFiles&&this.uploadedFiles.length>0},chooseDisabled(){return this.disabled||this.fileLimit&&this.fileLimit<=this.files.length+this.uploadedFileCount},uploadDisabled(){return this.disabled||!this.hasFiles||this.fileLimit&&this.fileLimit<this.files.length},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},completedLabel(){return this.$primevue.config.locale.completed},pendingLabel(){return this.$primevue.config.locale.pending}},components:{FileUploadButton:c.default,FileUploadProgressBar:g.default,FileUploadMessage:m.default,FileContent:B,PlusIcon:u.default,UploadIcon:f.default,TimesIcon:h.default},directives:{ripple:v.default}};const E={key:0,class:"p-fileupload p-fileupload-advanced p-component"},I=["multiple","accept","disabled"],w={class:"p-fileupload-buttonbar"},D={class:"p-button-label"},x={key:0,class:"p-fileupload-empty"},$={key:1,class:"p-fileupload p-fileupload-basic p-component"},V={class:"p-button-label"},U=["accept","disabled","multiple"];return function(e,l){void 0===l&&(l={});var t=l.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===t&&i.firstChild?i.insertBefore(s,i.firstChild):i.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e))}}("\n.p-fileupload-content {\n    position: relative;\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-fileupload-buttonbar {\n    display: flex;\n    flex-wrap: wrap;\n}\n.p-fileupload > input[type='file'],\n.p-fileupload-basic input[type='file'] {\n    display: none;\n}\n.p-fluid .p-fileupload .p-button {\n    width: auto;\n}\n.p-fileupload-file {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n}\n.p-fileupload-file-thumbnail {\n    flex-shrink: 0;\n}\n.p-fileupload-file-actions {\n    margin-left: auto;\n}\n"),L.render=function(e,l,t,i,s,o){const a=d.resolveComponent("FileUploadButton"),n=d.resolveComponent("FileUploadProgressBar"),r=d.resolveComponent("FileUploadMessage"),p=d.resolveComponent("FileContent"),c=d.resolveDirective("ripple");return o.isAdvanced?(d.openBlock(),d.createElementBlock("div",E,[d.createElementVNode("input",{ref:"fileInput",type:"file",onChange:l[0]||(l[0]=(...e)=>o.onFileSelect&&o.onFileSelect(...e)),multiple:t.multiple,accept:t.accept,disabled:o.chooseDisabled},null,40,I),d.createElementVNode("div",w,[d.renderSlot(e.$slots,"header",{files:s.files,uploadedFiles:s.uploadedFiles,chooseCallback:o.choose,uploadCallback:o.upload,clearCallback:o.clear},(()=>[d.withDirectives((d.openBlock(),d.createElementBlock("span",{class:d.normalizeClass(o.advancedChooseButtonClass),style:d.normalizeStyle(t.style),onClick:l[1]||(l[1]=(...e)=>o.choose&&o.choose(...e)),onKeydown:l[2]||(l[2]=d.withKeys(((...e)=>o.choose&&o.choose(...e)),["enter"])),onFocus:l[3]||(l[3]=(...e)=>o.onFocus&&o.onFocus(...e)),onBlur:l[4]||(l[4]=(...e)=>o.onBlur&&o.onBlur(...e)),tabindex:"0"},[d.renderSlot(e.$slots,"chooseicon",{},(()=>[(d.openBlock(),d.createBlock(d.resolveDynamicComponent(t.chooseIcon?"span":"PlusIcon"),{class:d.normalizeClass(["p-button-icon p-button-icon-left",t.chooseIcon]),"aria-hidden":"true"},null,8,["class"]))])),d.createElementVNode("span",D,d.toDisplayString(o.chooseButtonLabel),1)],38)),[[c]]),t.showUploadButton?(d.openBlock(),d.createBlock(a,{key:0,label:o.uploadButtonLabel,onClick:o.upload,disabled:o.uploadDisabled},{icon:d.withCtx((l=>[d.renderSlot(e.$slots,"uploadicon",{},(()=>[(d.openBlock(),d.createBlock(d.resolveDynamicComponent(t.uploadIcon?"span":"UploadIcon"),{class:d.normalizeClass([l.class,t.uploadIcon]),"aria-hidden":"true"},null,8,["class"]))]))])),_:3},8,["label","onClick","disabled"])):d.createCommentVNode("",!0),t.showCancelButton?(d.openBlock(),d.createBlock(a,{key:1,label:o.cancelButtonLabel,onClick:o.clear,disabled:o.cancelDisabled},{icon:d.withCtx((l=>[d.renderSlot(e.$slots,"cancelicon",{},(()=>[(d.openBlock(),d.createBlock(d.resolveDynamicComponent(t.cancelIcon?"span":"TimesIcon"),{class:d.normalizeClass([l.class,t.cancelIcon]),"aria-hidden":"true"},null,8,["class"]))]))])),_:3},8,["label","onClick","disabled"])):d.createCommentVNode("",!0)]))]),d.createElementVNode("div",{ref:"content",class:"p-fileupload-content",onDragenter:l[5]||(l[5]=(...e)=>o.onDragEnter&&o.onDragEnter(...e)),onDragover:l[6]||(l[6]=(...e)=>o.onDragOver&&o.onDragOver(...e)),onDragleave:l[7]||(l[7]=(...e)=>o.onDragLeave&&o.onDragLeave(...e)),onDrop:l[8]||(l[8]=(...e)=>o.onDrop&&o.onDrop(...e))},[d.renderSlot(e.$slots,"content",{files:s.files,uploadedFiles:s.uploadedFiles,removeUploadedFileCallback:o.removeUploadedFile,removeFileCallback:o.remove,progress:s.progress,messages:s.messages},(()=>[o.hasFiles?(d.openBlock(),d.createBlock(n,{key:0,value:s.progress,showValue:!1},null,8,["value"])):d.createCommentVNode("",!0),(d.openBlock(!0),d.createElementBlock(d.Fragment,null,d.renderList(s.messages,(e=>(d.openBlock(),d.createBlock(r,{key:e,severity:"error",onClose:o.onMessageClose},{default:d.withCtx((()=>[d.createTextVNode(d.toDisplayString(e),1)])),_:2},1032,["onClose"])))),128)),o.hasFiles?(d.openBlock(),d.createBlock(p,{key:1,files:s.files,onRemove:o.remove,badgeValue:o.pendingLabel,previewWidth:t.previewWidth,templates:e.$slots},null,8,["files","onRemove","badgeValue","previewWidth","templates"])):d.createCommentVNode("",!0),d.createVNode(p,{files:s.uploadedFiles,onRemove:o.removeUploadedFile,badgeValue:o.completedLabel,badgeSeverity:"success",previewWidth:t.previewWidth,templates:e.$slots},null,8,["files","onRemove","badgeValue","previewWidth","templates"])])),!e.$slots.empty||o.hasFiles||o.hasUploadedFiles?d.createCommentVNode("",!0):(d.openBlock(),d.createElementBlock("div",x,[d.renderSlot(e.$slots,"empty")]))],544)])):o.isBasic?(d.openBlock(),d.createElementBlock("div",$,[(d.openBlock(!0),d.createElementBlock(d.Fragment,null,d.renderList(s.messages,(e=>(d.openBlock(),d.createBlock(r,{key:e,severity:"error",onClose:o.onMessageClose},{default:d.withCtx((()=>[d.createTextVNode(d.toDisplayString(e),1)])),_:2},1032,["onClose"])))),128)),d.withDirectives((d.openBlock(),d.createElementBlock("span",{class:d.normalizeClass(o.basicChooseButtonClass),style:d.normalizeStyle(t.style),onMouseup:l[12]||(l[12]=(...e)=>o.onBasicUploaderClick&&o.onBasicUploaderClick(...e)),onKeydown:l[13]||(l[13]=d.withKeys(((...e)=>o.choose&&o.choose(...e)),["enter"])),onFocus:l[14]||(l[14]=(...e)=>o.onFocus&&o.onFocus(...e)),onBlur:l[15]||(l[15]=(...e)=>o.onBlur&&o.onBlur(...e)),tabindex:"0"},[!o.hasFiles||t.auto?d.renderSlot(e.$slots,"uploadicon",{key:0},(()=>[(d.openBlock(),d.createBlock(d.resolveDynamicComponent(t.uploadIcon?"span":"UploadIcon"),{class:d.normalizeClass(["p-button-icon p-button-icon-left",t.uploadIcon]),"aria-hidden":"true"},null,8,["class"]))])):d.renderSlot(e.$slots,"chooseicon",{key:1},(()=>[(d.openBlock(),d.createBlock(d.resolveDynamicComponent(t.chooseIcon?"span":"PlusIcon"),{class:d.normalizeClass(["p-button-icon p-button-icon-left",t.chooseIcon]),"aria-hidden":"true"},null,8,["class"]))])),d.createElementVNode("span",V,d.toDisplayString(o.basicChooseButtonLabel),1),o.hasFiles?d.createCommentVNode("",!0):(d.openBlock(),d.createElementBlock("input",{key:2,ref:"fileInput",type:"file",accept:t.accept,disabled:t.disabled,multiple:t.multiple,onChange:l[9]||(l[9]=(...e)=>o.onFileSelect&&o.onFileSelect(...e)),onFocus:l[10]||(l[10]=(...e)=>o.onFocus&&o.onFocus(...e)),onBlur:l[11]||(l[11]=(...e)=>o.onBlur&&o.onBlur(...e))},null,40,U))],38)),[[c]])])):d.createCommentVNode("",!0)},L}(primevue.button,primevue.icons.plus,primevue.icons.times,primevue.icons.upload,primevue.message,primevue.progressbar,primevue.ripple,primevue.utils,primevue.badge,Vue);