Skip to content

Commit

Permalink
fix(file-ui): Do not use a 'file' input element, instead use a button…
Browse files Browse the repository at this point in the history 
… that triggers file select dialog to select files
  • Loading branch information
@andris9
andris9 committed Nov 6, 2023
1 parent 7845e99 commit 14a9fe3
Show file tree
Hide file tree
Showing 7 changed files with 130 additions and 119 deletions.
89 changes: 56 additions & 33 deletions static/js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down
18 changes: 2 additions & 16 deletions views/config/ai.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -356,12 +356,6 @@
Select an EML-formatted email file from the disk to send to the OpenAI API for inspection.
</p>

<div class="custom-file">
<input type="file" class="custom-file-input" id="emlEmail">
<label class="custom-file-label" for="emlEmail">Choose EML email</label>
<small id="inputToHelp" class="form-text text-muted">Select the email to be analyzed</small>
</div>

<div id="testPromptError" class="d-none">
<div class="alert alert-danger"></div>
</div>
Expand All @@ -379,7 +373,7 @@
<span class="icon text-white-50">
<i class="fas fa-flask"></i>
</span>
<span class="text">Analyze email</span>
<span class="text">Select and Analyze email&#x2026;</span>

</button>

Expand Down Expand Up @@ -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)
}
Expand Down Expand Up @@ -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 || {};
Expand Down
44 changes: 22 additions & 22 deletions views/config/license.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,13 +157,21 @@
<form method="post" id="licenseForm" action="/admin/config/license">
<input type="hidden" name="crumb" id="crumb" value="{{crumb}}" />

<div class="mb-3">
<button type="button" class="btn btn-info btn-icon-split" id="licenseFile">
<span class="icon text-white-50">
<i class="fas fa-file-import"></i>
</span>
<span class="text">Select license key from file&#x2026;</span>
</button>
</div>

<div class="form-group">
<div class="text-muted float-right code-link">[<a href="/admin/iframe/docs#/license/postV1License"
target="_blank">license</a>]
</div>


<label for="licenseTextElement">License key</label>
<label for="licenseTextElement">Or paste license key contents to this text box</label>

<textarea class="form-control droptxt autoselect {{#if errors.license}}is-invalid{{/if}}"
id="licenseTextElement" name="license" rows="9" data-enable-grammarly="false" spellcheck="false"
Expand All @@ -175,12 +183,6 @@
<small class="form-text text-muted">Paste or drag a license key file to this text box</small>
</div>

<div class="custom-file mb-3">
<input type="file" class="custom-file-input" id="licenseFile">
<label class="custom-file-label" for="licenseFile">Or choose the license key from a
file&#x2026;</label>
</div>

<div class="mb-4">
<button type="submit" class="btn btn-primary btn-icon-split">
<span class="icon text-white-50">
Expand Down Expand Up @@ -252,30 +254,28 @@
});
}
let fileSelectElm = document.getElementById('licenseFile');
let licenseTextElm = document.getElementById('licenseTextElement')
let loadFromFile = async () => {
try {
let licenseFileTxt = await readContentFromFile(fileSelectElm, 'text');
let fileSelectElm = document.getElementById('licenseFile');
fileSelectElm.addEventListener('click', (e) => {
e.preventDefault();
browseFileContents('text').then(licenseFileTxt => {
if (licenseFileTxt) {
licenseFileTxt = (licenseFileTxt || '').toString().trim()
licenseFileTxt = (licenseFileTxt || '').toString().trim().substring(0, 10 * 1024)
licenseTextElm.value = licenseFileTxt;
licenseTextElm.focus();
licenseTextElm.select();
if (licenseFileTxt.indexOf('BEGIN LICENSE') >= 0) {
document.getElementById('licenseForm').submit();
} else {
licenseTextElm.focus();
licenseTextElm.select();
}
}
} catch (err) {
}).catch(err => {
console.error(err);
if (err.code === 'NoFileSelected') {
return
}
showToast('Failed to read license key file\n' + err.message, 'check-circle');
return
}
}
fileSelectElm.addEventListener('change', loadFromFile);
})
});
});
</script>
39 changes: 20 additions & 19 deletions views/config/oauth.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,15 +106,15 @@
{{#if activeGmailService}}

<div class="form-group">
<label for="serviceFile">
Extract service values from a JSON formatted key file (optional)
</label>
<div class="custom-file">
<input type="file" class="custom-file-input" id="serviceFile">
<label class="custom-file-label" for="serviceFile">Choose service key file</label>
</div>
<small class="form-text text-muted">Choose the file you got when you created a new service key and
selected JSON as the output format.</small>
<button type="button" class="btn btn-info btn-icon-split" id="serviceFile">
<span class="icon text-white-50">
<i class="fas fa-file-import"></i>
</span>
<span class="text">Select service key file&#x2026;</span>
</button>
<small class="form-text text-muted">Select the JSON file you received after generating a new service key
to
retrieve the service values.</small>
</div>

<div class="form-group">
Expand Down Expand Up @@ -319,18 +319,16 @@
let serviceFileElm = document.getElementById('serviceFile');
if (serviceFileElm) {
serviceFileElm.addEventListener('change', e => {
serviceFileElm.addEventListener('click', e => {
e.preventDefault();
browseFileContents('text').then(jsonStr => {
if (!jsonStr) {
return
}
if (!serviceFileElm.files || !serviceFileElm.files.length) {
return;
}
let fr = new FileReader();
fr.onload = (evt) => {
let data;
try {
data = JSON.parse(evt.target.result);
data = JSON.parse(jsonStr);
} catch (err) {
return showToast('Selected file is not JSON formatted', 'alert-triangle');
}
Expand All @@ -347,8 +345,11 @@
document.getElementById('serviceKey').value = data.private_key;
return showToast('Loaded service values from file', 'check-circle');
};
fr.readAsText(serviceFileElm.files[0]);
}).catch(err => {
console.error(err);
return showToast('Failed to load service key file', 'alert-triangle');
});
});
}
Expand Down
21 changes: 11 additions & 10 deletions views/config/oauth/edit.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,18 +51,16 @@
let serviceFileElm = document.getElementById('serviceFile');
if (serviceFileElm) {
serviceFileElm.addEventListener('change', e => {
serviceFileElm.addEventListener('click', e => {
e.preventDefault();
browseFileContents('text').then(jsonStr => {
if (!jsonStr) {
return
}
if (!serviceFileElm.files || !serviceFileElm.files.length) {
return;
}
let fr = new FileReader();
fr.onload = (evt) => {
let data;
try {
data = JSON.parse(evt.target.result);
data = JSON.parse(jsonStr);
} catch (err) {
return showToast('Selected file is not JSON formatted', 'alert-triangle');
}
Expand All @@ -79,8 +77,11 @@
document.getElementById('serviceKey').value = data.private_key;
return showToast('Loaded service values from file', 'check-circle');
};
fr.readAsText(serviceFileElm.files[0]);
}).catch(err => {
console.error(err);
return showToast('Failed to load service key file', 'alert-triangle');
});
});
}
Expand Down
21 changes: 11 additions & 10 deletions views/config/oauth/new.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,18 +49,16 @@
let serviceFileElm = document.getElementById('serviceFile');
if (serviceFileElm) {
serviceFileElm.addEventListener('change', e => {
serviceFileElm.addEventListener('click', e => {
e.preventDefault();
browseFileContents('text').then(jsonStr => {
if (!jsonStr) {
return
}
if (!serviceFileElm.files || !serviceFileElm.files.length) {
return;
}
let fr = new FileReader();
fr.onload = (evt) => {
let data;
try {
data = JSON.parse(evt.target.result);
data = JSON.parse(jsonStr);
} catch (err) {
return showToast('Selected file is not JSON formatted', 'alert-triangle');
}
Expand All @@ -77,8 +75,11 @@
document.getElementById('serviceKey').value = data.private_key;
return showToast('Loaded service values from file', 'check-circle');
};
fr.readAsText(serviceFileElm.files[0]);
}).catch(err => {
console.error(err);
return showToast('Failed to load service key file', 'alert-triangle');
});
});
}
Expand Down
Loading

0 comments on commit 14a9fe3

Please sign in to comment.