fix: wait for both upload and selection

issue #177
This commit is contained in:
C4illin 2024-11-21 22:44:13 +01:00
parent f04fe760e3
commit 4c05fd72bb

View file

@ -4,6 +4,8 @@ const dropZone = document.getElementById("dropzone");
const convertButton = document.querySelector("input[type='submit']"); const convertButton = document.querySelector("input[type='submit']");
const fileNames = []; const fileNames = [];
let fileType; let fileType;
let pendingFiles = 0;
let formatSelected = false;
dropZone.addEventListener("dragover", () => { dropZone.addEventListener("dragover", () => {
dropZone.classList.add("dragover"); dropZone.classList.add("dragover");
@ -62,7 +64,10 @@ const updateSearchBar = () => {
target.onmousedown = () => { target.onmousedown = () => {
convertToElement.value = target.dataset.value; convertToElement.value = target.dataset.value;
convertToInput.value = `${target.dataset.target} using ${target.dataset.converter}`; convertToInput.value = `${target.dataset.target} using ${target.dataset.converter}`;
convertButton.disabled = false; formatSelected = true;
if (pendingFiles === 0 && fileNames.length > 0) {
convertButton.disabled = false;
}
showMatching(""); showMatching("");
}; };
} }
@ -77,6 +82,7 @@ const updateSearchBar = () => {
convertToInput.addEventListener("search", () => { convertToInput.addEventListener("search", () => {
// when the user clears the search bar using the 'x' button // when the user clears the search bar using the 'x' button
convertButton.disabled = true; convertButton.disabled = true;
formatSelected = false;
}); });
convertToInput.addEventListener("blur", (e) => { convertToInput.addEventListener("blur", (e) => {
@ -170,10 +176,14 @@ const deleteRow = (target) => {
const index = fileNames.indexOf(filename); const index = fileNames.indexOf(filename);
fileNames.splice(index, 1); fileNames.splice(index, 1);
// reset fileInput
fileInput.value = "";
// if fileNames is empty, reset fileType // if fileNames is empty, reset fileType
if (fileNames.length === 0) { if (fileNames.length === 0) {
fileType = null; fileType = null;
fileInput.removeAttribute("accept"); fileInput.removeAttribute("accept");
convertButton.disabled = true;
setTitle(); setTitle();
} }
@ -184,16 +194,13 @@ const deleteRow = (target) => {
"Content-Type": "application/json", "Content-Type": "application/json",
}, },
}) })
.then((res) => res.json())
.then((data) => {
console.log(data);
})
.catch((err) => console.log(err)); .catch((err) => console.log(err));
}; };
const uploadFiles = (files) => { const uploadFiles = (files) => {
convertButton.disabled = true; convertButton.disabled = true;
convertButton.textContent = "Uploading..."; convertButton.textContent = "Uploading...";
pendingFiles += 1;
const formData = new FormData(); const formData = new FormData();
@ -207,8 +214,13 @@ const uploadFiles = (files) => {
}) })
.then((res) => res.json()) .then((res) => res.json())
.then((data) => { .then((data) => {
convertButton.disabled = false; pendingFiles -= 1;
convertButton.textContent = "Convert"; if (pendingFiles === 0) {
if (formatSelected) {
convertButton.disabled = false;
}
convertButton.textContent = "Convert";
}
console.log(data); console.log(data);
}) })
.catch((err) => console.log(err)); .catch((err) => console.log(err));