From 13ca1c0c2fa4ff0bda9b4d75964ef0ee7d951cc9 Mon Sep 17 00:00:00 2001 From: Ilya Kreymer Date: Fri, 1 May 2020 15:48:59 -0700 Subject: [PATCH] load errors: detect non-200/206 response and return an error local file loading support: fix blob reader, add UI for file chooser and url entry ui: choose default tab after loading completed remove some logs --- src/frontend.js | 178 ++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 165 insertions(+), 13 deletions(-) diff --git a/src/frontend.js b/src/frontend.js index e6be076..abf71fb 100644 --- a/src/frontend.js +++ b/src/frontend.js @@ -17,6 +17,7 @@ import farListAlt from '@fortawesome/fontawesome-free/svgs/solid/list-alt.svg'; import fasSearch from '@fortawesome/fontawesome-free/svgs/solid/search.svg'; import farPlayCircle from '@fortawesome/fontawesome-free/svgs/regular/play-circle.svg'; import fabGoogleDrive from '@fortawesome/fontawesome-free/svgs/brands/google-drive.svg'; +import fasUpload from '@fortawesome/fontawesome-free/svgs/solid/upload.svg' // =========================================================================== @@ -66,8 +67,13 @@ class AppMain extends LitElement ${this.sourceUrl ? html` - - ` : this.sourceUrl === "" ? html`` : html``} + + ` : this.sourceUrl === "" ? html` + ` : + + html``} `; } @@ -96,6 +102,28 @@ class AppMain extends LitElement this.sourceUrl = this.pageParams.get("source") || ""; } + + onStartLoad(event) { + // just redirect right away? + if (!event.detail.blobUrl) { + this.pageParams.set("source", event.detail.sourceUrl); + window.location.search = this.pageParams.toString(); + return; + } + + this.sourceUrl = event.detail.sourceUrl; + this.loadInfo = event.detail; + } + + onCollLoaded(event) { + this.loadInfo = null; + this.initRoute(); + + if (event.detail.sourceUrl !== this.sourceUrl) { + this.pageParams.set("source", event.detail.sourceUrl); + window.location.search = this.pageParams.toString(); + } + } } // =========================================================================== @@ -108,6 +136,7 @@ class WrLoader extends LitElement this.percent = 0; this.coll = ""; this.state = "waiting"; + this.loadInfo = null; this.worker = new Worker("./dist/dbworker.js"); } @@ -115,9 +144,11 @@ class WrLoader extends LitElement static get properties() { return { sourceUrl: { type: String }, + loadInfo: { type: Object }, state: { type: String }, progress: { type: Number }, percent: { type: Number }, + error: { type: String}, total: { type: Number }, status: { type: String }, coll: { type: String }, @@ -135,6 +166,10 @@ class WrLoader extends LitElement case "collProgress": if (event.data.name === this.coll) { this.percent = event.data.percent; + if (event.data.error) { + this.error = event.data.error; + this.state = "errored"; + } } break; @@ -182,6 +217,20 @@ class WrLoader extends LitElement name: this.sourceUrl}; break; + case "file:": + if (!this.loadInfo) { + this.state = "errored"; + this.error = "File URLs are local and can not be shared. You can choose a file to upload from the main page."; + return; + } + + source = { + sourceUrl: this.loadInfo.blobUrl, + sourceId: this.loadInfo.name, + name: this.loadInfo.name + } + break; + } } catch (e) {} @@ -202,7 +251,6 @@ class WrLoader extends LitElement } async onLoadReady(event) { - console.log(event); if (this._gdResolve) { //const digest = await digestMessage(url, 'SHA-256'); //this.coll = "id-" + digest.slice(0, 12); @@ -242,9 +290,13 @@ class WrLoader extends LitElement return html` `; + case "errored": + return html`
${this.error}
`; + case "waiting": default: return html``; + } } } @@ -255,11 +307,15 @@ class WrIndex extends LitElement constructor() { super(); this.colls = []; + + this.fileDisplayName = ""; + this.file = null; } static get properties() { return { colls: { type: Array }, + fileDisplayName: { type: String } } } @@ -291,20 +347,100 @@ class WrIndex extends LitElement return false; } + onChooseFile(event) { + if (event.currentTarget.files.length === 0) { + return; + } + + this.file = event.currentTarget.files[0]; + this.fileDisplayName = "file://" + this.file.name; + this.requestUpdate(); + } + + onStartLoad(event) { + event.preventDefault(); + + const detail = {sourceUrl: this.fileDisplayName}; + + if (this.file) { + detail.blobUrl = URL.createObjectURL(this.file); + detail.name = this.fileDisplayName; + } + + this.dispatchEvent(new CustomEvent("load-start", {detail})); + + return false; + } + + onInput(event) { + this.fileDisplayName = event.currentTarget.value; + + if (this.file && this.fileDisplayName && this.fileDisplayName.startsWith("file://")) { + this.file = null; + this.fileDisplayName = ""; + } + } + static get styles() { return css` .size { margin-right: 20px; } + .extra-padding { + padding: 2em; + } + .no-top-padding { + padding-top: 1.0em; + } + div.field.has-addons { + flex: auto; + } `; } render() { return html` +
+
+ +
+