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 () {
|
document.addEventListener("DOMContentLoaded", function() {
|
||||||
const fileInput = document.getElementById("file");
|
const fileInput = document.getElementById("file");
|
||||||
const uploadBtn = document.getElementById("uploadBtn");
|
const progressContainer = document.getElementById("uploadProgressContainer");
|
||||||
const uploadForm = document.getElementById("uploadFileForm");
|
const uploadForm = document.getElementById("uploadFileForm");
|
||||||
|
|
||||||
if (!fileInput || !uploadBtn || !uploadForm) {
|
// When files are selected, display a list with preview, full file name, and a progress bar.
|
||||||
console.error("Upload elements not found.");
|
fileInput.addEventListener("change", function() {
|
||||||
return;
|
progressContainer.innerHTML = ""; // Clear previous entries
|
||||||
}
|
const files = fileInput.files;
|
||||||
|
if (files.length > 0) {
|
||||||
// Create a div for displaying selected file names
|
const list = document.createElement("ul");
|
||||||
let fileListDisplay = document.getElementById("selectedFiles");
|
list.style.listStyle = "none";
|
||||||
if (!fileListDisplay) {
|
list.style.padding = "0";
|
||||||
fileListDisplay = document.createElement("div");
|
|
||||||
fileListDisplay.id = "selectedFiles";
|
Array.from(files).forEach((file, index) => {
|
||||||
fileListDisplay.style.marginTop = "10px"; // Space below file input
|
const listItem = document.createElement("li");
|
||||||
fileListDisplay.style.padding = "10px";
|
// Add padding to move the row contents down slightly
|
||||||
fileListDisplay.style.border = "1px solid #ddd";
|
listItem.style.paddingTop = "20px";
|
||||||
fileListDisplay.style.borderRadius = "5px";
|
listItem.style.marginBottom = "10px";
|
||||||
fileListDisplay.style.background = "#f8f9fa"; // Light gray background
|
listItem.style.display = "flex";
|
||||||
fileListDisplay.style.display = "none"; // Hide initially
|
listItem.style.alignItems = "center";
|
||||||
|
listItem.style.flexWrap = "wrap"; // allow wrapping for long file names
|
||||||
// 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) {
|
// Create preview container (32x32)
|
||||||
alert("Please select at least one file.");
|
const previewContainer = document.createElement("div");
|
||||||
return;
|
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();
|
// On form submit, upload each file individually and update its corresponding progress bar.
|
||||||
for (let i = 0; i < fileInput.files.length; i++) {
|
uploadForm.addEventListener("submit", function(e) {
|
||||||
formData.append("file[]", fileInput.files[i]);
|
e.preventDefault();
|
||||||
}
|
const files = fileInput.files;
|
||||||
|
if (files.length === 0) {
|
||||||
uploadBtn.disabled = true; // Disable button while uploading
|
alert("No files selected.");
|
||||||
|
return;
|
||||||
fetch("upload.php", {
|
}
|
||||||
method: "POST",
|
|
||||||
body: formData
|
const listItems = progressContainer.querySelectorAll("li");
|
||||||
})
|
let finishedCount = 0;
|
||||||
.then(response => response.json())
|
|
||||||
.then(result => {
|
Array.from(files).forEach((file, index) => {
|
||||||
console.log("Upload result:", result);
|
const formData = new FormData();
|
||||||
|
// Use the field name "file[]" as your upload.php expects.
|
||||||
if (Array.isArray(result)) {
|
formData.append("file[]", file);
|
||||||
alert(result.map(r => r.success || r.error).join("\n"));
|
|
||||||
|
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 {
|
} else {
|
||||||
alert(result.success || result.error || "Upload completed.");
|
speedText = (speed / 1048576).toFixed(1) + " MB/s";
|
||||||
}
|
}
|
||||||
|
}
|
||||||
loadFileList(); // Refresh file list after upload
|
listItems[index].progressBar.style.width = percentComplete + "%";
|
||||||
fileListDisplay.innerHTML = ""; // Clear displayed file list
|
listItems[index].progressBar.innerText = percentComplete + "% (" + speedText + ")";
|
||||||
fileListDisplay.style.display = "none"; // Hide after upload
|
}
|
||||||
fileInput.value = ""; // Reset file input
|
});
|
||||||
uploadBtn.disabled = false; // Re-enable button after upload
|
|
||||||
})
|
xhr.onreadystatechange = function() {
|
||||||
.catch(error => {
|
if (xhr.readyState === 4) {
|
||||||
console.error("Upload error:", error);
|
finishedCount++;
|
||||||
uploadBtn.disabled = false;
|
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