From 14a9fe30d482678d5912b36a48986754bd232eac Mon Sep 17 00:00:00 2001 From: Andris Reinman Date: Mon, 6 Nov 2023 09:49:24 +0200 Subject: [PATCH] fix(file-ui): Do not use a 'file' input element, instead use a button that triggers file select dialog to select files --- static/js/app.js | 89 ++++++++++++++++++++++------------- views/config/ai.hbs | 18 +------ views/config/license.hbs | 44 ++++++++--------- views/config/oauth.hbs | 39 +++++++-------- views/config/oauth/edit.hbs | 21 +++++---- views/config/oauth/new.hbs | 21 +++++---- views/partials/oauth_form.hbs | 17 ++++--- 7 files changed, 130 insertions(+), 119 deletions(-) diff --git a/static/js/app.js b/static/js/app.js index 4bf373c6..e47b549c 100644 --- a/static/js/app.js +++ b/static/js/app.js @@ -24,48 +24,71 @@ window.showToast = (message, icon) => { $(toast).toast('show'); }; -window.readContentFromFile = (elm, type) => - new Promise((resolve, reject) => { - const reader = new FileReader(); +window.browseFileContents = function (type) { + let iElm = document.createElement('input'); + iElm.setAttribute('type', 'file'); + iElm.style.width = '1px'; + iElm.style.height = '1px'; + iElm.style.position = 'absolute'; + iElm.style.left = '-1000px'; + iElm.style.top = '-1000px'; + document.body.appendChild(iElm); + + return new Promise((resolve, reject) => { + iElm.addEventListener('change', () => { + const reader = new FileReader(); + + reader.addEventListener('load', event => { + let fileContents = event.target.result; + document.body.removeChild(iElm); + + switch (type) { + case 'base64': { + // extract base64 content from a Data URI + fileContents = fileContents.substring(event.target.result.indexOf(',') + 1); + break; + } + case 'arrayBuffer': + case 'text': + default: + // do nothing + } + + resolve(fileContents); + }); + + reader.addEventListener('error', err => { + console.error(err); + document.body.removeChild(iElm); + reject(new Error('Failed loading file')); + }); + + reader.addEventListener('abort', () => { + document.body.removeChild(iElm); + reject(new Error('Failed loading file')); + }); + + if (!iElm.files || !iElm.files[0]) { + document.body.removeChild(iElm); + return resolve(null); + } - reader.addEventListener('load', event => { - let str = event.target.result; switch (type) { - case 'base64': { - // extract base64 content from a Data URI - str = str.substring(event.target.result.indexOf(',') + 1); + case 'base64': + reader.readAsDataURL(iElm.files[0]); + break; + case 'arrayBuffer': + reader.readAsArrayBuffer(iElm.files[0]); break; - } case 'text': default: - // do nothing + reader.readAsText(iElm.files[0], 'UTF-8'); } - resolve(str); }); - reader.addEventListener('error', () => { - reject(new Error('Failed loading file')); - }); - - reader.addEventListener('abort', () => { - reject(new Error('Failed loading file')); - }); - - if (!elm.files || !elm.files[0]) { - let error = new Error('No file selected'); - error.code = 'NoFileSelected'; - return reject(error); - } - - switch (type) { - case 'base64': - reader.readAsDataURL(elm.files[0]); - break; - case 'text': - default: - reader.readAsText(elm.files[0], 'UTF-8'); - } + iElm.click(); }); +}; document.addEventListener('DOMContentLoaded', () => { let toggleAllElements = (allElementsElm, otherElements, direction) => { diff --git a/views/config/ai.hbs b/views/config/ai.hbs index 859b7fe6..4a5fd59e 100644 --- a/views/config/ai.hbs +++ b/views/config/ai.hbs @@ -356,12 +356,6 @@ Select an EML-formatted email file from the disk to send to the OpenAI API for inspection.

-
- - - Select the email to be analyzed -
-
@@ -379,7 +373,7 @@ - Analyze email + Select and Analyze email… @@ -561,15 +555,13 @@ document.getElementById('testPromptResponse').classList.add('d-none'); } - let fileSelectElm = document.getElementById('emlEmail'); - async function testPromptFn() { let emailFile; clearResponses(); try { - emailFile = await readContentFromFile(fileSelectElm, 'base64'); + emailFile = await browseFileContents('base64'); } catch (err) { return showError(err.message) } @@ -641,12 +633,6 @@ runFileTest(); }); - fileSelectElm.addEventListener('change', () => { - if (testPromptBtn.disabled || !fileSelectElm.files || !fileSelectElm.files[0]) { - return - } - runFileTest(); - }); evaluationWorker.onmessage = e => { const { type, result, error } = e && e.data || {}; diff --git a/views/config/license.hbs b/views/config/license.hbs index 90e8d423..5943f6eb 100644 --- a/views/config/license.hbs +++ b/views/config/license.hbs @@ -157,13 +157,21 @@
+
+ +
+
[license]
- - +