docs: 優化全頁拖曳上傳支援,增加防重複檢查機制

This commit is contained in:
Your Name 2026-01-21 11:13:21 +08:00
parent e12f2da6dd
commit d0388066a5

View file

@ -29,18 +29,27 @@ const getTranslation = (category, key, params) => {
return text; return text;
}; };
dropZone.addEventListener("dragover", (e) => { // ===== 全頁拖曳上傳支援UI 零變動版)=====
// 只監聽 dragover 和 drop不操作任何 UI class
// 這樣虛線框不會變粗、不會閃爍
// 防重複機制:記錄最近處理的檔案
const recentlyProcessedFiles = new Set();
const getFileKey = (file) => `${file.name}_${file.size}_${file.lastModified}`;
const clearRecentFiles = () => {
setTimeout(() => recentlyProcessedFiles.clear(), 100);
};
// 全頁 dragover只做 preventDefault防止瀏覽器開啟檔案
document.addEventListener("dragover", (e) => {
e.preventDefault(); e.preventDefault();
dropZone.classList.add("dragover"); e.stopPropagation();
}); });
dropZone.addEventListener("dragleave", () => { // 全頁 drop處理檔案上傳
dropZone.classList.remove("dragover"); document.addEventListener("drop", (e) => {
});
dropZone.addEventListener("drop", (e) => {
e.preventDefault(); e.preventDefault();
dropZone.classList.remove("dragover"); e.stopPropagation();
const files = e.dataTransfer.files; const files = e.dataTransfer.files;
@ -54,60 +63,19 @@ dropZone.addEventListener("drop", (e) => {
handleFile(file); handleFile(file);
} }
}); });
// ===== 全頁拖曳上傳支援 =====
// 允許使用者將檔案拖曳到頁面任何位置即可上傳
// UI 完全不變,只是擴大拖曳的偵測範圍
let dragCounter = 0;
document.addEventListener("dragenter", (e) => {
e.preventDefault();
dragCounter++;
// 當檔案進入頁面時,顯示 dropzone 的 dragover 效果
if (e.dataTransfer.types.includes("Files")) {
dropZone.classList.add("dragover");
}
});
document.addEventListener("dragleave", (e) => {
e.preventDefault();
dragCounter--;
// 只有當完全離開頁面時才移除效果
if (dragCounter === 0) {
dropZone.classList.remove("dragover");
}
});
document.addEventListener("dragover", (e) => {
e.preventDefault();
// 保持 dragover 效果
if (e.dataTransfer.types.includes("Files")) {
dropZone.classList.add("dragover");
}
});
document.addEventListener("drop", (e) => {
e.preventDefault();
dragCounter = 0;
dropZone.classList.remove("dragover");
const files = e.dataTransfer.files;
if (files.length === 0) {
console.warn("No files dropped — likely a URL or unsupported source.");
return;
}
for (const file of files) {
console.log("Handling dropped file (page-level):", file.name);
handleFile(file);
}
});
// ===== 全頁拖曳上傳支援結束 ===== // ===== 全頁拖曳上傳支援結束 =====
// Extracted handleFile function for reusability in drag-and-drop and file input // Extracted handleFile function for reusability in drag-and-drop and file input
function handleFile(file) { function handleFile(file) {
// 防重複檢查:如果這個檔案剛剛已經處理過,直接跳過
const fileKey = getFileKey(file);
if (recentlyProcessedFiles.has(fileKey)) {
console.log("Skipping duplicate file:", file.name);
return;
}
recentlyProcessedFiles.add(fileKey);
clearRecentFiles();
const fileList = document.querySelector("#file-list"); const fileList = document.querySelector("#file-list");
const removeText = getTranslation("common", "remove"); const removeText = getTranslation("common", "remove");