From 99f807ac3859854c71789e79ea16e469f1f23992 Mon Sep 17 00:00:00 2001 From: Sebastien DUMETZ Date: Mon, 13 May 2024 15:29:01 +0200 Subject: [PATCH] support upload of exported zip files through the upload button --- source/ui/composants/UploadButton.ts | 9 +++-- source/ui/screens/Home.ts | 51 +++++++++++++++------------- source/ui/screens/List.ts | 34 ++++++++++++------- 3 files changed, 55 insertions(+), 39 deletions(-) diff --git a/source/ui/composants/UploadButton.ts b/source/ui/composants/UploadButton.ts index bceb3bd2..0939323b 100644 --- a/source/ui/composants/UploadButton.ts +++ b/source/ui/composants/UploadButton.ts @@ -9,14 +9,19 @@ export default class UploadButton extends LitElement dispatchChange = (ev :MouseEvent)=>{ this.dispatchEvent(new CustomEvent("change", { detail: { - files: (ev.target as any).files, + files: (ev.target as HTMLInputElement).files, } })); } render() :TemplateResult { return html` - `; + `; } static readonly styles = css` diff --git a/source/ui/screens/Home.ts b/source/ui/screens/Home.ts index dc68d7d2..230aa2b3 100644 --- a/source/ui/screens/Home.ts +++ b/source/ui/screens/Home.ts @@ -65,33 +65,36 @@ interface Upload{ this.fetchScenes(); } - upload(file :File){ - console.log("Upload File : ", file); - let sceneName = file.name.split(".").slice(0,-1).join("."); + upload(file :File, as_scenes = false){ + let name = file.name.split(".").slice(0,-1).join("."); + if(name in this.uploads){ + Notification.show(`Can't create ${name}: already uploading`, "error", 4000); + return; + } const setError = ({code, message})=>{ - Notification.show(`Can't create ${sceneName}: ${message}`, "error", 4000); - delete this.uploads[sceneName]; + Notification.show(`Can't create ${name}: ${message}`, "error", 8000); + delete this.uploads[name]; this.uploads = {...this.uploads}; } const setProgress = (n)=>{ - this.uploads = {...this.uploads, [sceneName]: {...this.uploads[sceneName], progress: n}}; + this.uploads = {...this.uploads, [name]: {...this.uploads[name], progress: n}}; } const setDone = ()=>{ this.fetchScenes().then(()=>{ - delete this.uploads[sceneName]; + delete this.uploads[name]; this.uploads = {...this.uploads}; }); } - this.uploads = {...this.uploads, [sceneName]: {progress:0, done: false}}; + this.uploads = {...this.uploads, [name]: {progress:0, done: false}}; (async ()=>{ let xhr = new XMLHttpRequest(); xhr.onload = function onUploadDone(){ - if(xhr.status != 201 /*created*/){ + if(299 < xhr.status){ setError({code: xhr.status, message: xhr.statusText}); }else{ - Notification.show(sceneName+" uploaded", "info"); + Notification.show(name+" uploaded", "info"); setTimeout(setDone, 0); } } @@ -108,7 +111,7 @@ interface Upload{ setError({code: xhr.status, message: xhr.statusText}); } - xhr.open('POST', `/api/v1/scenes/${sceneName}`); + xhr.open('POST', as_scenes? `/api/v1/scenes`:`/api/v1/scenes/${name}`); xhr.send(file); })(); } @@ -163,27 +166,24 @@ interface Upload{ return html`

${this.t("info.homeHeader")}

- + ${this.t("ui.upload")} ${this.t("info.useStandalone")}
- - ${(this.list.length == 0 && Object.keys(this.uploads).length == 0)?null: html` - ${(myScenes.length > 0) ? +
+

${this.t("ui.myScenes")}

+ ${uploads.length !== 0? html``: (myScenes.length > 0) ? html` -
-

${this.t("ui.myScenes")}

${myScenes.map((scene)=>this.renderScene(mode, scene))}
-
`: null} - ${(uploads.length === 0 && recentScenes.some(s=>myScenes.indexOf(s) == -1))? html`
+
+ ${(recentScenes.some(s=>myScenes.indexOf(s) == -1))? html`

${this.t("ui.ctimeSection")}

${repeat([ - ...uploads, ...recentScenes, ],({name})=>name , (scene)=>this.renderScene(mode, scene))}
@@ -202,17 +202,20 @@ interface Upload{ ],({name})=>name , (scene)=>this.renderSceneCompact(scene))}
- `} `} - onUploadBtnChange = (ev)=>{ + onUploadBtnChange = (ev:CustomEvent<{files: FileList}>)=>{ ev.preventDefault(); for(let file of [...ev.detail.files]){ - if( !/\.glb$/i.test(file.name)){ + let ext = file.name.split(".").pop().toLowerCase(); + if(ext == "zip"){ + this.upload(file, true); + }else if(ext == "glb"){ + this.upload(file, false); + }else{ Notification.show(`${file.name} is not valid. This method only accepts .glb files` , "error", 4000); continue; }; - this.upload(file) } } diff --git a/source/ui/screens/List.ts b/source/ui/screens/List.ts index e083f923..06dbda83 100644 --- a/source/ui/screens/List.ts +++ b/source/ui/screens/List.ts @@ -60,34 +60,38 @@ interface Upload{ this.fetchScenes(); } - upload(file :File){ + upload(file :File, as_scenes = false){ console.log("Upload File : ", file); - let sceneName = file.name.split(".").slice(0,-1).join("."); + let name = file.name.split(".").slice(0,-1).join("."); + if(name in this.uploads){ + Notification.show(`Can't create ${name}: already uploading`, "error", 4000); + return; + } const setError = ({code, message})=>{ - Notification.show(`Can't create ${sceneName}: ${message}`, "error", 4000); - delete this.uploads[sceneName]; + Notification.show(`Can't create ${name}: ${message}`, "error", 8000); + delete this.uploads[name]; this.uploads = {...this.uploads}; } const setProgress = (n)=>{ - this.uploads = {...this.uploads, [sceneName]: {...this.uploads[sceneName], progress: n}}; + this.uploads = {...this.uploads, [name]: {...this.uploads[name], progress: n}}; } const setDone = ()=>{ this.fetchScenes().then(()=>{ - delete this.uploads[sceneName]; + delete this.uploads[name]; this.uploads = {...this.uploads}; }); } - this.uploads = {...this.uploads, [sceneName]: {progress:0, done: false}}; + this.uploads = {...this.uploads, [name]: {progress:0, done: false}}; this.orderBy = "mtime"; (async ()=>{ let xhr = new XMLHttpRequest(); xhr.onload = function onUploadDone(){ - if(xhr.status != 201 /*created*/){ + if(299 < xhr.status){ setError({code: xhr.status, message: xhr.statusText}); }else{ - Notification.show(sceneName+" uploaded", "info"); + Notification.show(name+" uploaded", "info"); setTimeout(setDone, 0); } } @@ -104,7 +108,7 @@ interface Upload{ setError({code: xhr.status, message: xhr.statusText}); } - xhr.open('POST', `/api/v1/scenes/${sceneName}`); + xhr.open('POST', as_scenes? `/api/v1/scenes`:`/api/v1/scenes/${name}`); xhr.send(file); })(); } @@ -230,14 +234,18 @@ interface Upload{ } } - onUploadBtnChange = (ev)=>{ + onUploadBtnChange = (ev:CustomEvent<{files: FileList}>)=>{ ev.preventDefault(); for(let file of [...ev.detail.files]){ - if( !/\.glb$/i.test(file.name)){ + let ext = file.name.split(".").pop().toLowerCase(); + if(ext == "zip"){ + this.upload(file, true); + }else if(ext == "glb"){ + this.upload(file, false); + }else{ Notification.show(`${file.name} is not valid. This method only accepts .glb files` , "error", 4000); continue; }; - this.upload(file) } }