파일 업로드를 하는데 파일을 zip 파일로 만들어서 올려야했다
js로 구현했고 드래그앤드롭이 가능하고 올라간 파일은 리스트로 보이며 삭제가 가능하고
추가 업로드도 가능하다
<body>
<div id="fileDropArea" class="fileDropArea">
<p>Drag & Drop files here</p>
<p>or</p>
<input
type="file"
id="file-input"
multiple
accept=".stl,.obj,.zip"
style="display: none"
/>
<label for="file-input" style="cursor: pointer"
>Click here to select files (STL, OBJ, ZIP)</label
>
</div>
<ul id="file-list"></ul>
<button id="clear-list">휴지통</button>
<button id="submit">제출</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script>
<script>
const MAX_FILES = 100;
const fileList = document.getElementById("file-list");
const fileInput = document.getElementById("file-input");
const clearListBtn = document.getElementById("clear-list");
const submitBtn = document.getElementById("submit");
const fileDropArea = document.getElementById("fileDropArea");
let files = [];
fileInput.addEventListener("change", handleFileUpload);
clearListBtn.addEventListener("click", clearFileList);
submitBtn.addEventListener("click", submitFiles);
fileDropArea.addEventListener("dragover", handleDragOver);
fileDropArea.addEventListener("dragleave", handleDragLeave);
fileDropArea.addEventListener("drop", handleDrop);
function handleDragOver(event) {
event.preventDefault();
fileDropArea.classList.add("dragover");
}
function handleDragLeave() {
fileDropArea.classList.remove("dragover");
}
function handleDrop(event) {
event.preventDefault();
fileDropArea.classList.remove("dragover");
const droppedFiles = event.dataTransfer.files;
handleFiles(droppedFiles);
}
function handleFileUpload(event) {
const newFiles = Array.from(event.target.files);
handleFiles(newFiles);
}
function handleFiles(newFiles) {
if (files.length + newFiles.length > MAX_FILES) {
alert("파일 갯수는 최대 " + MAX_FILES + "개까지 가능합니다.");
return;
}
Array.from(newFiles).forEach((file) => {
if (file instanceof File && isValidFileType(file)) {
files.push(file);
} else {
alert("지원되지 않는 파일 형식입니다: " + file.name);
}
});
renderFileList();
toggleClearListBtn();
}
function isValidFileType(file) {
const allowedTypes = [".stl", ".obj", ".zip"];
const fileType = file.name
.slice(file.name.lastIndexOf("."))
.toLowerCase();
return allowedTypes.includes(fileType);
}
function renderFileList() {
fileList.innerHTML = "";
files.forEach((file, index) => {
const li = document.createElement("li");
li.textContent = file.name;
const removeBtn = document.createElement("button");
removeBtn.textContent = "x";
removeBtn.addEventListener("click", () => removeFile(index));
li.appendChild(removeBtn);
fileList.appendChild(li);
});
}
function removeFile(index) {
files.splice(index, 1);
renderFileList();
toggleClearListBtn();
}
function clearFileList() {
files = [];
renderFileList();
toggleClearListBtn();
}
function toggleClearListBtn() {
clearListBtn.style.display = files.length > 0 ? "inline-block" : "none";
}
function submitFiles() {
const zip = new JSZip();
const folder = zip.folder("uploads");
files.forEach((file) => {
folder.file(file.name, file);
});
folder
.generateAsync({ type: "blob" })
.then((blob) => {
// 여기서 blob을 API로 전송하면 됩니다.
console.log(blob);
const zipFilename = "files.zip";
const a = document.createElement("a");
a.href = URL.createObjectURL(blob);
a.download = zipFilename;
a.click();
})
.catch((error) => console.error("Error creating zip file:", error));
}
</script>
</body>
무럭무럭 성장중🌿