Fix selecting file with keyboard

This commit is contained in:
Reimar 2026-01-06 10:47:03 +01:00
parent ef6fbd3e04
commit b9389df7cb
Signed by: Reimar
GPG Key ID: 93549FA07F0AE268
3 changed files with 7 additions and 3 deletions

View File

@ -13,4 +13,3 @@ mkdir -p public/assets/scripts
fetch ffmpeg 0.12.15
fetch core 0.12.10

View File

@ -50,6 +50,11 @@ function openFileSelector() {
document.getElementById("file-drop-area").onclick = openFileSelector;
document.getElementById("change-file").onclick = openFileSelector;
document.getElementById("file-drop-area").onkeydown = event => {
if (['Enter', 'Space'].includes(event.code))
openFileSelector();
};
document.getElementById("file-input").oninput = () => {
setTimeout(() => {
const file = document.getElementById("file-input").files[0];

View File

@ -13,7 +13,7 @@
<p>Compress video files to a specific file size, so you can upload them to your favorite social media and messaging apps!</p>
<section id="file-picker-section">
<div id="file-drop-area" onkeydown="['Enter', 'Space'].includes(event.code) && openFileSelector()" tabindex="0">
<div id="file-drop-area" tabindex="0">
<span>Drag and drop a file here!</span>
</div>
<input id="file-input" type="file" accept="video/*" tabindex="-1">
@ -31,7 +31,7 @@
<option value="mb" selected>MB</option>
</select>
<button id="compress" class="primary">Go!</button>
<button id="compress" class="primary">Compress</button>
</section>
<section id="loading-section" style="opacity: 0; display: none;">