103 lines
4.0 KiB
JavaScript
103 lines
4.0 KiB
JavaScript
document.addEventListener("DOMContentLoaded", function () {
|
|
const fileInput = document.getElementById("file");
|
|
const uploadBtn = document.getElementById("uploadBtn");
|
|
const uploadForm = document.getElementById("uploadFileForm");
|
|
|
|
if (!fileInput || !uploadBtn || !uploadForm) {
|
|
console.error("Upload elements not found.");
|
|
return;
|
|
}
|
|
|
|
// Create a div for displaying selected file names
|
|
let fileListDisplay = document.getElementById("selectedFiles");
|
|
if (!fileListDisplay) {
|
|
fileListDisplay = document.createElement("div");
|
|
fileListDisplay.id = "selectedFiles";
|
|
fileListDisplay.style.marginTop = "10px"; // Space below file input
|
|
fileListDisplay.style.padding = "10px";
|
|
fileListDisplay.style.border = "1px solid #ddd";
|
|
fileListDisplay.style.borderRadius = "5px";
|
|
fileListDisplay.style.background = "#f8f9fa"; // Light gray background
|
|
fileListDisplay.style.display = "none"; // Hide initially
|
|
|
|
// Ensure the upload button exists before inserting
|
|
if (uploadBtn.parentNode) {
|
|
uploadBtn.parentNode.insertBefore(fileListDisplay, uploadBtn); // Place above upload button
|
|
} else {
|
|
console.error("Upload button parent node not found.");
|
|
}
|
|
}
|
|
|
|
// Display selected file names and move the upload button down
|
|
fileInput.addEventListener("change", function () {
|
|
uploadBtn.disabled = fileInput.files.length === 0;
|
|
fileListDisplay.innerHTML = ""; // Clear previous list
|
|
|
|
if (fileInput.files.length > 0) {
|
|
fileListDisplay.style.display = "block"; // Show file list
|
|
const list = document.createElement("ul");
|
|
list.style.padding = "0";
|
|
list.style.margin = "0";
|
|
list.style.listStyle = "none"; // Remove bullet points
|
|
list.style.maxHeight = "150px"; // Prevent list from getting too tall
|
|
list.style.overflowY = "auto"; // Scroll if too many files
|
|
|
|
for (let i = 0; i < fileInput.files.length; i++) {
|
|
const listItem = document.createElement("li");
|
|
listItem.textContent = fileInput.files[i].name;
|
|
listItem.style.borderBottom = "1px solid #ddd";
|
|
listItem.style.padding = "5px 10px";
|
|
list.appendChild(listItem);
|
|
}
|
|
fileListDisplay.appendChild(list);
|
|
} else {
|
|
fileListDisplay.style.display = "none"; // Hide if no files selected
|
|
}
|
|
|
|
// Move upload button down when files are selected
|
|
uploadBtn.style.marginTop = "10px";
|
|
});
|
|
|
|
// Handle multiple file uploads
|
|
uploadForm.addEventListener("submit", function (event) {
|
|
event.preventDefault();
|
|
|
|
if (fileInput.files.length === 0) {
|
|
alert("Please select at least one file.");
|
|
return;
|
|
}
|
|
|
|
const formData = new FormData();
|
|
for (let i = 0; i < fileInput.files.length; i++) {
|
|
formData.append("file[]", fileInput.files[i]);
|
|
}
|
|
|
|
uploadBtn.disabled = true; // Disable button while uploading
|
|
|
|
fetch("upload.php", {
|
|
method: "POST",
|
|
body: formData
|
|
})
|
|
.then(response => response.json())
|
|
.then(result => {
|
|
console.log("Upload result:", result);
|
|
|
|
if (Array.isArray(result)) {
|
|
alert(result.map(r => r.success || r.error).join("\n"));
|
|
} else {
|
|
alert(result.success || result.error || "Upload completed.");
|
|
}
|
|
|
|
loadFileList(); // Refresh file list after upload
|
|
fileListDisplay.innerHTML = ""; // Clear displayed file list
|
|
fileListDisplay.style.display = "none"; // Hide after upload
|
|
fileInput.value = ""; // Reset file input
|
|
uploadBtn.disabled = false; // Re-enable button after upload
|
|
})
|
|
.catch(error => {
|
|
console.error("Upload error:", error);
|
|
uploadBtn.disabled = false;
|
|
});
|
|
});
|
|
});
|