[javascript] 내 컴퓨터 파일을 브라우저에 드롭 했을 때 확인하는 방법

 

내 컴퓨터에 있는 파일을 선택해 브라우저 특정 영역에 드롭하면 업로드 되는 기능을 만들수 있습니다.

대부분의 브라우저에서 사용가능 하기 때문에 시도해볼만 합니다.

 

핵심 코드는 다음과 같습니다. event의 dataTransfer에서 드롭한 파일 정보를 가져 올 수 있습니다.

 

function onDropHandler(event){
  event.preventDefault();
  
  const data = event.dataTransfer;
  const files = data.files;
  const count = files.length;
    for (var i = 0; i < count; i++) {
      const file = files[i];
      consoleLog(`File ${i}: ${file.type} ${file.name}, ${file.size}\n`);
    }
  
  consoleLog(`Total Count: ${count}`);
}

 

각 파일 정보를 가져 온 후 각 서비스에서 제공하는 API에 데이터를 보내면 됩니다.

 

전체 코드는 여기에 있습니다.

 

참고

https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop

https://html5demos.com/drag/