Skip to content

Commit

Permalink
support upload of exported zip files through the upload button
Browse files Browse the repository at this point in the history
  • Loading branch information
@sdumetz
sdumetz committed May 13, 2024
1 parent 5c5109d commit 99f807a
Show file tree
Hide file tree
Showing 3 changed files with 55 additions and 39 deletions.
9 changes: 7 additions & 2 deletions source/ui/composants/UploadButton.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`<label class="upload-btn" for="fileUpload"><slot></slot></label>
<input multiple hidden @change={${this.dispatchChange}} id="fileUpload" type="file"/>`;
<input
@change={${this.dispatchChange}} id="fileUpload"
type="file"
multiple
hidden
/>`;
}

static readonly styles = css`
Expand Down
51 changes: 27 additions & 24 deletions source/ui/screens/Home.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
Expand All @@ -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);
})();
}
Expand Down Expand Up @@ -163,27 +166,24 @@ interface Upload{
return html`
<h2>${this.t("info.homeHeader")}</h2>
<div class="list-tasks" style="margin-bottom:1rem">
<upload-button class="btn btn-main" .disabled=${uploads.length != 0} @change=${this.onUploadBtnChange}>
<upload-button class="btn btn-main" @change=${this.onUploadBtnChange}>
${this.t("ui.upload")}<spin-loader style="padding-left: 5px" .visible=${uploads.length != 0} inline></spin-loader>
</upload-button>
<a class="btn btn-main" href="/ui/standalone/?lang=${this.language.toUpperCase()}">${this.t("info.useStandalone")}</a>
</div>
${(this.list.length == 0 && Object.keys(this.uploads).length == 0)?null: html`
${(myScenes.length > 0) ?
<div class="section">
<h3>${this.t("ui.myScenes")}</h3>
${uploads.length !== 0? html`<spin-loader visible></spin-loader>`: (myScenes.length > 0) ?
html`
<div class="section">
<h3>${this.t("ui.myScenes")}</h3>
<div class="list-grid" style="position:relative; margin-top:20px">
${myScenes.map((scene)=>this.renderScene(mode, scene))}
</div>
</div>
`: null}
${(uploads.length === 0 && recentScenes.some(s=>myScenes.indexOf(s) == -1))? html`<div class="section">
</div>
${(recentScenes.some(s=>myScenes.indexOf(s) == -1))? html`<div class="section">
<h3>${this.t("ui.ctimeSection")}</h3>
<div class="list-grid" style="position:relative;">
${repeat([
...uploads,
...recentScenes,
],({name})=>name , (scene)=>this.renderScene(mode, scene))}
</div>
Expand All @@ -202,17 +202,20 @@ interface Upload{
],({name})=>name , (scene)=>this.renderSceneCompact(scene))}
</div>
</div>
`}
`}

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)
}
}

Expand Down
34 changes: 21 additions & 13 deletions source/ui/screens/List.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
Expand All @@ -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);
})();
}
Expand Down Expand Up @@ -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)
}
}

Expand Down

0 comments on commit 99f807a

Please sign in to comment.