2 lines
9.5 KiB
JavaScript
2 lines
9.5 KiB
JavaScript
function v({wire:o,state:u,statePath:p,key:h,isMultiple:r,maxFiles:f,uploadingMessage:c,chunkSize:d,storeFileChunkUrl:m,shouldUseAmazonS3MultipartUpload:g,acceptedFileTypes:F}){return{wire:o,state:u,statePath:p,key:h,isMultiple:r,maxFiles:f,uploadingMessage:c,chunkSize:d,storeFileChunkUrl:m,shouldUseAmazonS3MultipartUpload:g,acceptedFileTypes:F,inputFiles:r?{}:null,retries:3,init:function(){this.$refs.inputLabel&&(this.$refs.inputLabel.addEventListener("dragover",t=>{t.preventDefault(),t.stopPropagation(),this.$refs.inputLabel.setAttribute("data-dragover","true")}),this.$refs.inputLabel.addEventListener("dragleave",t=>{t.preventDefault(),t.stopPropagation(),this.$refs.inputLabel.removeAttribute("data-dragover")}),this.$refs.inputLabel.addEventListener("drop",t=>{t.preventDefault(),t.stopPropagation(),this.$refs.inputLabel.removeAttribute("data-dragover");const e=t.dataTransfer.files;e.length>0&&this.createFiles(e)})),this.wire.hook("morphed",({el:t,component:e})=>{if(!this.isMultiple)return;const i={};Object.entries(this.state).sort(([,s],[,n])=>s.order-n.order).forEach(([s,n])=>{n.order=null,i[s]=n}),this.state=i})},reorderFiles(t){t.forEach((e,i)=>{const s=e.split("file-")[1];this.state[s]&&(this.state[s].order=i)})},get hasReachedMaxFiles(){return this.isMultiple?this.maxFiles?Object.keys(this.state).length>=this.maxFiles:!1:this.state!==null},createFiles:function(t){Array.from(t).forEach(e=>{this.createFile(e)})},createFile:async function(t){if(!this.isFileTypeAccepted(t))return;let e=this.generateFileId();this.isMultiple?this.inputFiles[e]=t:this.inputFiles=t;let i={type:"chunked",id:e,originalFilename:t.name,serverFilename:null,size:t.size,finishedChunks:0,totalChunks:Math.ceil(t.size/this.chunkSize),status:"created",error:null,amazonS3MultipartUploadData:null,amazonS3MultipartUploadParts:[]};if(this.isMultiple?this.state[e]=i:this.state=i,this.dispatchFormProcessingStartedEvent(),this.shouldUseAmazonS3MultipartUpload){i=this.updateFile(e,"awaiting_amazon_s3_multipart_create");let{serverFilename:s,amazonS3MultipartUploadData:n}=await this.wire.callSchemaComponentMethod(this.key,"createAmazonS3Multipart",{queuedFileId:i.id,originalFilename:i.originalFilename,mimeType:this.getFileMimeType(e),totalChunks:i.totalChunks,fileSize:i.size});i=this.updateFile(e,"uploading",null,s,n)}this.uploadChunks(e)},uploadChunks:async function(t){let e=this.getFile(t);for(e=this.updateFile(t,"uploading");e.finishedChunks<e.totalChunks;){let i=this.retries;if(e.status==="pending_pause"){e=this.updateFile(t,"paused");break}try{if(await this.uploadNextChunk(t),e=this.getFile(t),!e)return}catch(s){if(i>0){if(i--,await this.uploadNextChunk(t),e=this.getFile(t),!e)return}else e=this.updateFile(t,"error",s)}e=this.getFile(t)}e.finishedChunks===e.totalChunks&&(this.shouldUseAmazonS3MultipartUpload&&(e=this.updateFile(t,"awaiting_amazon_s3_multipart_complete"),await this.wire.callSchemaComponentMethod(this.key,"completeAmazonS3Multipart",{queuedFileId:e.originalFilename,amazonS3MultipartUploadId:e.amazonS3MultipartUploadData.amazonS3MultipartUploadId,amazonS3MultipartUploadKey:e.amazonS3MultipartUploadData.amazonS3MultipartUploadKey,amazonS3MultipartUploadParts:e.amazonS3MultipartUploadParts})),e=this.updateFile(t,"completed"),this.dispatchFormProcessingFinishedEvent())},uploadNextChunk:async function(t){let e=this.getFile(t),i=this.getInputFile(t).slice(e.finishedChunks*this.chunkSize,(e.finishedChunks+1)*this.chunkSize);if(this.shouldUseAmazonS3MultipartUpload){let s=e.amazonS3MultipartUploadData.amazonS3MultipartUploadPresignedUrls[e.finishedChunks];if(!s){e=this.updateFile(t,"error","Missing presigned URL for uploading.");return}const n=await fetch(s,{method:"PUT",body:i});if(!n.ok){e=this.updateFile(t,"error",`Failed to upload chunk: ${n.statusText}`);return}const a=n.headers.get("Etag");a?e.amazonS3MultipartUploadParts.push({PartNumber:e.finishedChunks+1,ETag:a}):console.error("No `ETag` header found in response for S3 Multipart part upload. Please check the `ExposeHeaders` to contain the `ETag` header in your bucket CORS configuration."),e=this.updateFile(t,null,null,null,null,e.finishedChunks+1)}else{let s=new FormData;s.append("id",t),s.append("original_filename",e.originalFilename),s.append("server_filename",e.serverFilename),s.append("current_chunk",e.finishedChunks),s.append("total_chunks",e.totalChunks),s.append("file",i);const n=await fetch(this.storeFileChunkUrl.replace("-ID-",t),{method:"POST",body:s});if(n.ok){const a=await n.json();e=this.updateFile(t,null,null,a.serverFilename,null,e.finishedChunks+1)}else{if(n.status===406){this.removeFile(t);return}e=this.updateFile(t,"error",`${n.statusText} (${n.status})`)}}},pause:function(t){let e=this.getFile(t);e&&e.status==="uploading"&&(e=this.updateFile(t,"pending_pause"),this.refresh())},resume:async function(t){let e=this.getFile(t);e&&e.status==="paused"&&(e=this.updateFile(t,"uploading"),this.uploadChunks(t))},generateFileId:function(){const t="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";let e="";for(let i=0;i<16;i++)e+=t.charAt(Math.floor(Math.random()*t.length));return e},getFile:function(t){return this.isMultiple?this.state[t]||null:this.state},updateFile:function(t,e=null,i=null,s=null,n=null,a=null){const l=this.getFile(t);return l&&(e&&(l.status=e,l.error=i),s&&(l.serverFilename=s),n&&(l.amazonS3MultipartUploadData=n),a&&(l.finishedChunks=a),this.refresh()),this.getFile(t)},removeFile:function(t){r?delete this.inputFiles[t]:this.inputFiles=null,this.isMultiple?this.state&&this.state[t]&&(delete this.state[t],this.dispatchFormProcessingFinishedEvent(),this.refresh()):(this.state=null,this.dispatchFormProcessingFinishedEvent(),this.refresh())},getInputFile:function(t){return this.isMultiple?this.inputFiles[t]||null:this.inputFiles},getFileFilename:function(t){let e=this.getFile(t);if(!e)return null;let i;return e.type==="existing"?i=e.basename:i=e.originalFilename,i.split(".").shift()??"-"},getFileExtension:function(t){let e=this.getFile(t);if(!e)return null;let i;return e.type==="existing"?i=e.basename:i=e.originalFilename,i.split(".").pop().toUpperCase()??"-"},getFileMimeType:function(t){let e=this.getFile(t);if(!e)return null;if(e.type==="existing"){if(e.mimeType)return e.mimeType;const s=this.getFileExtension(t).toLowerCase();return{jpg:"image/jpeg",jpeg:"image/jpeg",png:"image/png",gif:"image/gif",webp:"image/webp",svg:"image/svg+xml",pdf:"application/pdf",doc:"application/msword",docx:"application/vnd.openxmlformats-officedocument.wordprocessingml.document",xls:"application/vnd.ms-excel",xlsx:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",ppt:"application/vnd.ms-powerpoint",pptx:"application/vnd.openxmlformats-officedocument.presentationml.presentation",csv:"text/csv",txt:"text/plain",zip:"application/zip",rar:"application/vnd.rar",mp3:"audio/mpeg",wav:"audio/wav",mp4:"video/mp4",avi:"video/x-msvideo",mov:"video/quicktime",json:"application/json",xml:"application/xml",html:"text/html",css:"text/css",js:"application/javascript"}[s]||"application/octet-stream"}let i=this.getInputFile(t);return i||console.log(e,this.inputFiles),i.type},getFileSize:function(t){let e=this.getFile(t);if(!e)return null;let i;if(e.type==="existing"?i=e.size:i=e.file,!i)return;let s=i/1024;if(s<1e3)return Math.round(s)+" KB";let n=s/1024;if(n<1e3)return Math.round(n)+" MB";let a=n/1024;return Math.round(a)+" GB"},isFilePreviewable:function(t){let e=this.getFile(t);if(!e)return null;if(e.type==="existing"&&!e.url)return!1;let i=this.getFileMimeType(t);return i?i.startsWith("image/"):!1},getFilePreviewUrl:function(t){let e=this.getFile(t);if(!e)return null;if(this.isFilePreviewable(t))return e.type==="existing"||e.type==="chunked"&&e.url?e.url:URL.createObjectURL(this.getInputFile(e.id))},getFilePreviewIcon:function(t){if(!this.getFile(t))return null;let i=this.getFileMimeType(t);return i?i==="image/gif"?"heroicon-o-gif":i.startsWith("image/")?"heroicon-o-photo":i==="application/zip"?"heroicon-o-folder":i==="application/vnd.ms-excel"||i==="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"||i==="application/vnd.oasis.opendocument.spreadsheet"||i==="text/csv"?"heroicon-o-table-cells":i==="application/vnd.ms-powerpoint"||i==="application/vnd.openxmlformats-officedocument.presentationml.presentation"?"heroicon-o-presentation-chart-bar":i.startsWith("audio/")?"heroicon-o-speaker-wave":i.startsWith("video/")?"heroicon-o-video-camera":i==="application/pdf"?"heroicon-o-document-text":"heroicon-o-document":"heroicon-o-document"},isFileStoredOnDisk:function(t){let e=this.getFile(t);return!(!e||e.type==="chunked"&&e.status!=="completed")},refresh:function(){this.isMultiple?this.state={...this.state}:this.state&&(this.state={...this.state})},dispatchFormProcessingStartedEvent:function(){this.dispatchFormEvent("form-processing-started",{message:this.uploadingMessage})},dispatchFormProcessingFinishedEvent:function(){if(this.isMultiple)for(const t in this.state){const e=this.state[t];if(e.type==="chunked"&&e.status!=="completed")return}else if(this.state&&this.state.type==="chunked"&&this.state.status!=="completed")return;this.dispatchFormEvent("form-processing-finished")},dispatchFormEvent:function(t,e={}){this.$refs.root.closest("form").dispatchEvent(new CustomEvent(t,{composed:!0,cancelable:!0,detail:e}))},isFileTypeAccepted:function(t){if(!this.acceptedFileTypes||this.acceptedFileTypes.length===0)return!0;const e=t.type.toLowerCase();for(let i=0;i<this.acceptedFileTypes.length;i++){const s=this.acceptedFileTypes[i].toLowerCase();if(s.includes("*")){const[n,a]=s.split("/");if(a==="*"&&e.startsWith(n+"/"))return!0}if(e===s)return!0}return!1}}}export{v as default};
|