uploading list changes and progress bar added
This commit is contained in:
Ryan
236
upload.js
236
upload.js
@@ -1,102 +1,150 @@
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const fileInput = document.getElementById("file");
|
||||
const uploadBtn = document.getElementById("uploadBtn");
|
||||
const uploadForm = document.getElementById("uploadFileForm");
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
const fileInput = document.getElementById("file");
|
||||
const progressContainer = document.getElementById("uploadProgressContainer");
|
||||
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();
|
||||
// When files are selected, display a list with preview, full file name, and a progress bar.
|
||||
fileInput.addEventListener("change", function() {
|
||||
progressContainer.innerHTML = ""; // Clear previous entries
|
||||
const files = fileInput.files;
|
||||
if (files.length > 0) {
|
||||
const list = document.createElement("ul");
|
||||
list.style.listStyle = "none";
|
||||
list.style.padding = "0";
|
||||
|
||||
Array.from(files).forEach((file, index) => {
|
||||
const listItem = document.createElement("li");
|
||||
// Add padding to move the row contents down slightly
|
||||
listItem.style.paddingTop = "20px";
|
||||
listItem.style.marginBottom = "10px";
|
||||
listItem.style.display = "flex";
|
||||
listItem.style.alignItems = "center";
|
||||
listItem.style.flexWrap = "wrap"; // allow wrapping for long file names
|
||||
|
||||
if (fileInput.files.length === 0) {
|
||||
alert("Please select at least one file.");
|
||||
return;
|
||||
// Create preview container (32x32)
|
||||
const previewContainer = document.createElement("div");
|
||||
previewContainer.className = "file-preview";
|
||||
// If the file is an image, display its thumbnail; otherwise, show default icon.
|
||||
if (file.type.startsWith("image/")) {
|
||||
const img = document.createElement("img");
|
||||
// Force dimensions via inline style:
|
||||
img.style.width = "32px";
|
||||
img.style.height = "32px";
|
||||
img.style.objectFit = "cover";
|
||||
const reader = new FileReader();
|
||||
reader.onload = function(e) {
|
||||
img.src = e.target.result;
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
previewContainer.appendChild(img);
|
||||
} else {
|
||||
const icon = document.createElement("i");
|
||||
icon.className = "material-icons";
|
||||
icon.textContent = "insert_drive_file";
|
||||
icon.style.fontSize = "32px"; // Ensure icon is 32px
|
||||
previewContainer.appendChild(icon);
|
||||
}
|
||||
|
||||
// File name container – allow full file name with wrapping.
|
||||
const fileNameDiv = document.createElement("div");
|
||||
fileNameDiv.textContent = file.name;
|
||||
fileNameDiv.style.flexGrow = "1";
|
||||
fileNameDiv.style.marginLeft = "10px";
|
||||
fileNameDiv.style.wordBreak = "break-word";
|
||||
|
||||
// Create progress bar container (fixed width of 250px)
|
||||
const progressDiv = document.createElement("div");
|
||||
progressDiv.classList.add("progress");
|
||||
progressDiv.style.flex = "0 0 250px";
|
||||
progressDiv.style.marginLeft = "5px";
|
||||
|
||||
const progressBar = document.createElement("div");
|
||||
progressBar.classList.add("progress-bar");
|
||||
progressBar.style.width = "0%";
|
||||
progressBar.innerText = "0%";
|
||||
|
||||
progressDiv.appendChild(progressBar);
|
||||
|
||||
// Assemble the list item.
|
||||
listItem.appendChild(previewContainer);
|
||||
listItem.appendChild(fileNameDiv);
|
||||
listItem.appendChild(progressDiv);
|
||||
|
||||
// Save reference for progress updates and record start time.
|
||||
listItem.progressBar = progressBar;
|
||||
listItem.startTime = Date.now();
|
||||
|
||||
list.appendChild(listItem);
|
||||
});
|
||||
|
||||
progressContainer.appendChild(list);
|
||||
}
|
||||
});
|
||||
|
||||
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"));
|
||||
// On form submit, upload each file individually and update its corresponding progress bar.
|
||||
uploadForm.addEventListener("submit", function(e) {
|
||||
e.preventDefault();
|
||||
const files = fileInput.files;
|
||||
if (files.length === 0) {
|
||||
alert("No files selected.");
|
||||
return;
|
||||
}
|
||||
|
||||
const listItems = progressContainer.querySelectorAll("li");
|
||||
let finishedCount = 0;
|
||||
|
||||
Array.from(files).forEach((file, index) => {
|
||||
const formData = new FormData();
|
||||
// Use the field name "file[]" as your upload.php expects.
|
||||
formData.append("file[]", file);
|
||||
|
||||
const xhr = new XMLHttpRequest();
|
||||
|
||||
xhr.upload.addEventListener("progress", function(e) {
|
||||
if (e.lengthComputable) {
|
||||
const percentComplete = Math.round((e.loaded / e.total) * 100);
|
||||
const elapsedTime = (Date.now() - listItems[index].startTime) / 1000; // seconds
|
||||
let speedText = "";
|
||||
if (elapsedTime > 0) {
|
||||
const speed = e.loaded / elapsedTime; // bytes per second
|
||||
if (speed < 1024) {
|
||||
speedText = speed.toFixed(0) + " B/s";
|
||||
} else if (speed < 1048576) {
|
||||
speedText = (speed / 1024).toFixed(1) + " KB/s";
|
||||
} else {
|
||||
alert(result.success || result.error || "Upload completed.");
|
||||
speedText = (speed / 1048576).toFixed(1) + " MB/s";
|
||||
}
|
||||
|
||||
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;
|
||||
});
|
||||
}
|
||||
listItems[index].progressBar.style.width = percentComplete + "%";
|
||||
listItems[index].progressBar.innerText = percentComplete + "% (" + speedText + ")";
|
||||
}
|
||||
});
|
||||
|
||||
xhr.onreadystatechange = function() {
|
||||
if (xhr.readyState === 4) {
|
||||
finishedCount++;
|
||||
if (xhr.status === 200) {
|
||||
listItems[index].progressBar.innerText = "Done";
|
||||
} else {
|
||||
listItems[index].progressBar.innerText = "Error";
|
||||
}
|
||||
console.log("Upload response for file", file.name, xhr.responseText);
|
||||
if (finishedCount === files.length) {
|
||||
if (typeof loadFileList === "function") {
|
||||
loadFileList();
|
||||
}
|
||||
// Reset the file input so it shows "No files selected"
|
||||
fileInput.value = "";
|
||||
// Clear the progress container after 5 seconds
|
||||
setTimeout(() => {
|
||||
progressContainer.innerHTML = "";
|
||||
}, 5000);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
xhr.open("POST", "upload.php", true);
|
||||
xhr.send(formData);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user