Skip to content

Commit ff2ef74

Browse files
committed
feat: add support for drag/drop of images
1 parent 448557b commit ff2ef74

File tree

1 file changed

+54
-57
lines changed

1 file changed

+54
-57
lines changed

public/script.js

Lines changed: 54 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,68 @@ let fileType;
77
let pendingFiles = 0;
88
let formatSelected = false;
99

10-
dropZone.addEventListener("dragover", () => {
10+
dropZone.addEventListener("dragover", (e) => {
11+
e.preventDefault();
1112
dropZone.classList.add("dragover");
1213
});
1314

1415
dropZone.addEventListener("dragleave", () => {
1516
dropZone.classList.remove("dragover");
1617
});
1718

18-
dropZone.addEventListener("drop", () => {
19-
dropZone.classList.remove("dragover");
19+
dropZone.addEventListener("drop", (e) => {
20+
e.preventDefault();
21+
dropZone.classList.remove("dragover");
22+
23+
const files = e.dataTransfer.files;
24+
25+
if (files.length === 0) {
26+
console.warn("No files dropped — likely a URL or unsupported source.");
27+
return;
28+
}
29+
30+
for (const file of files) {
31+
console.log("Handling dropped file:", file.name);
32+
handleFile(file);
33+
}
2034
});
2135

36+
// Extracted handleFile function for reusability in drag-and-drop and file input
37+
function handleFile(file) {
38+
const fileList = document.querySelector("#file-list");
39+
40+
const row = document.createElement("tr");
41+
row.innerHTML = `
42+
<td>${file.name}</td>
43+
<td><progress max="100"></progress></td>
44+
<td>${(file.size / 1024).toFixed(2)} kB</td>
45+
<td><a onclick="deleteRow(this)">Remove</a></td>
46+
`;
47+
48+
if (!fileType) {
49+
fileType = file.name.split(".").pop();
50+
fileInput.setAttribute("accept", `.${fileType}`);
51+
setTitle();
52+
53+
fetch(`${webroot}/conversions`, {
54+
method: "POST",
55+
body: JSON.stringify({ fileType }),
56+
headers: { "Content-Type": "application/json" },
57+
})
58+
.then((res) => res.text())
59+
.then((html) => {
60+
selectContainer.innerHTML = html;
61+
updateSearchBar();
62+
})
63+
.catch(console.error);
64+
}
65+
66+
fileList.appendChild(row);
67+
file.htmlRow = row;
68+
fileNames.push(file.name);
69+
uploadFile(file);
70+
}
71+
2272
const selectContainer = document.querySelector("form .select_container");
2373

2474
const updateSearchBar = () => {
@@ -106,62 +156,9 @@ const updateSearchBar = () => {
106156

107157
// Add a 'change' event listener to the file input element
108158
fileInput.addEventListener("change", (e) => {
109-
// Get the selected files from the event target
110159
const files = e.target.files;
111-
112-
// Select the file-list table
113-
const fileList = document.querySelector("#file-list");
114-
115-
// Loop through the selected files
116160
for (const file of files) {
117-
// Create a new table row for each file
118-
const row = document.createElement("tr");
119-
row.innerHTML = `
120-
<td>${file.name}</td>
121-
<td><progress max="100"></progress></td>
122-
<td>${(file.size / 1024).toFixed(2)} kB</td>
123-
<td><a onclick="deleteRow(this)">Remove</a></td>
124-
`;
125-
126-
if (!fileType) {
127-
fileType = file.name.split(".").pop();
128-
fileInput.setAttribute("accept", `.${fileType}`);
129-
setTitle();
130-
131-
// choose the option that matches the file type
132-
// for (const option of convertFromSelect.children) {
133-
// console.log(option.value);
134-
// if (option.value === fileType) {
135-
// option.selected = true;
136-
// }
137-
// }
138-
139-
fetch(`${webroot}/conversions`, {
140-
method: "POST",
141-
body: JSON.stringify({ fileType: fileType }),
142-
headers: {
143-
"Content-Type": "application/json",
144-
},
145-
})
146-
.then((res) => res.text())
147-
.then((html) => {
148-
selectContainer.innerHTML = html;
149-
updateSearchBar();
150-
})
151-
.catch((err) => console.log(err));
152-
}
153-
154-
// Append the row to the file-list table
155-
fileList.appendChild(row);
156-
157-
//Imbed row into the file to reference later
158-
file.htmlRow = row;
159-
160-
161-
// Append the file to the hidden input
162-
fileNames.push(file.name);
163-
164-
uploadFile(file);
161+
handleFile(file);
165162
}
166163
});
167164

0 commit comments

Comments
 (0)