웹 API가 계속 발전하고 그에 맞춰 Javascript도 개선되는 과정에서 괴리가 발생하는데요. 그중 한가지 사례로 다중 파일에 대한 드랍처리입니다.
아래의 드랍 처리는 2개 이상의 파일을 드랍했을때 처리되어야할 파일이 누락됩니다.
dropArea.addEventListener('drop', async (e) => { e.preventDefault(); dropArea.classList.remove('highlight'); fileListElement.innerHTML = ''; const items = e.dataTransfer.items; if (items) { for (let i = 0; i < items.length; i++) { try { const handle = await items[i].getAsFileSystemHandle(); if (handle.kind === 'file') { const file = await handle.getFile(); displayFile(file); } else if (handle.kind === 'directory') { await traverseFileSystemHandle(handle); } } catch (error) { console.error(error); } } } });
이를 개선한 코드가 다음과 같습니다.
dropArea.addEventListener('drop', async (e) => { e.preventDefault(); dropArea.classList.remove('highlight'); fileListElement.innerHTML = ''; const items = e.dataTransfer.items; if (items) { const processingPromises = []; for (let i = 0; i < items.length; i++) { processingPromises.push((async () => { if (items[i].getAsFileSystemHandle) { try { const handle = await items[i].getAsFileSystemHandle(); if (handle.kind === 'file') { const file = await handle.getFile(); displayFile(file); } else if (handle.kind === 'directory') { await traverseFileSystemHandle(handle); } } catch (error) { console.warn(error); } } })()); // 즉시 실행 } await Promise.allSettled(processingPromises); } });