크롬에서 drag and drop으로 파일 다운로드 만들기

gmail에서 파일 다운로드 할때 그냥 드래그앤 드랍 바탕화면에 갖다가 놓으면

 

자동으로 파일이 다운로드 됩니다. 이것이 신기해서 한번 찾아보았고 이렇게 구현 하면 됩니다.

 

어려울거 같지만 어렵지도 않습니다.

 

그럼 첫번째 step

 

var file = document.getElementById("dragout");
 
file.addEventListener("dragstart",function(evt){
    evt.dataTransfer.setData("DownloadURL",fileDetails);
},false);

이 예제를 보시면 바로 감이 오실겁니다. 먼저 dom으로 객체를 찾고 그 객체에 이벤트를 줍니다

 

드래그가 시작 되었을때 다운로드 URL을 주는겁니다.

 

그다음

 

<a href="Eadui.ttf" id="dragout" draggable="true" data-downloadurl="
    application/octet-stream
    :Eadui.ttf
    :http://thecssninja.com/gmail_dragout/Eadui.ttf">Font file</a>

 

태그는 이런식으로 선언하게 됩니다. 주목할것은 빨간색입니다. 빨간색에 첫번째 draggable=true는 드래그를 쓰게

 

만드는것입니다. HTML 5에서 추가된 속성입니다.

 

그리고 다음 data-downloadurl은 content-type:파일명:파일의 경로 이런식으로 구성되어 있습니다.

 

data-downloadurl은 드래그가 시작되었을때 셋 되어야 하는 값입니다.

 

그렇다면 data-downloadurl은 어떻게 전달해줘야하는것인가요?

 

var fileDetails;
 
if(typeof file.dataset === "undefined") {
    // Grab it the old way
    fileDetails = file.getAttribute("data-downloadurl");
} else {
    fileDetails = file.dataset.downloadurl;
}

 

이런식으로 사용하시면 됩니다. dataset(html5에서 추가)을 사용할수 없다면 일반적인 방법으로 불러 올것이고

 

사용할수 있다면 그냥 셋팅해주면 됩니다.

 

뭐 어렵지는 않죠?

 

다음번에 기회가 있으면 업로드도 한번 찾아서 해볼게요