83 lines
2.0 KiB
JavaScript
83 lines
2.0 KiB
JavaScript
let uploadButton = document.getElementById("upload-button");
|
|
let chosenfile = document.getElementById("chosen-file");
|
|
let fileName = document.getElementById("file-name");
|
|
let container = document.querySelector(".container");
|
|
let error = document.getElementById("error");
|
|
let fileDisplay = document.getElementById("file-display");
|
|
|
|
const fileHandler = (file, name, type) => {
|
|
console.log(type)
|
|
if (type.split("/")[0] !== "application" && type.split("/")[1] !== "vnd.openxmlformats-officedocument.spreadsheetml.sheet") {
|
|
//File Type Error
|
|
error.innerText = "Mohon unggah file excel ber ekstensi .xlsx";
|
|
return false;
|
|
}
|
|
error.innerText = "";
|
|
let reader = new FileReader();
|
|
reader.readAsDataURL(file);
|
|
reader.onloadend = () => {
|
|
//file and file name
|
|
let fileContainer = document.createElement("figure");
|
|
fileContainer.innerHTML += `<figcaption>${name}</figcaption>`;
|
|
fileDisplay.appendChild(fileContainer);
|
|
};
|
|
};
|
|
|
|
//Upload Button
|
|
uploadButton.addEventListener("change", () => {
|
|
fileDisplay.innerHTML = "";
|
|
Array.from(uploadButton.files).forEach((file) => {
|
|
fileHandler(file, file.name, file.type);
|
|
});
|
|
});
|
|
|
|
container.addEventListener(
|
|
"dragenter",
|
|
(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
container.classList.add("active");
|
|
},
|
|
false
|
|
);
|
|
|
|
container.addEventListener(
|
|
"dragleave",
|
|
(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
container.classList.remove("active");
|
|
},
|
|
false
|
|
);
|
|
|
|
container.addEventListener(
|
|
"dragover",
|
|
(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
container.classList.add("active");
|
|
},
|
|
false
|
|
);
|
|
|
|
container.addEventListener(
|
|
"drop",
|
|
(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
container.classList.remove("active");
|
|
let draggedData = e.dataTransfer;
|
|
let files = draggedData.files;
|
|
fileDisplay.innerHTML = "";
|
|
Array.from(files).forEach((file) => {
|
|
fileHandler(file, file.name, file.type);
|
|
});
|
|
},
|
|
false
|
|
);
|
|
|
|
window.onload = () => {
|
|
error.innerText = "";
|
|
};
|