[javascript] 자바스크립트로 파일 업로드 및 다운로드 관련 라이브러리 사용하기

14 Dec 2023

javascript

파일을 업로드하고 다운로드하는 기능은 웹 애플리케이션에서 흔히 사용되는 기능입니다. 자바스크립트로 파일 관련 작업을 수행할 때 Dropzone.js와 FileSaver.js 라이브러리를 활용할 수 있습니다. 이들의 기능을 살펴보고 간단한 예제로 활용 방법을 살펴보겠습니다.

Dropzone.js

Dropzone.js는 파일 업로드를 쉽게 처리할 수 있도록 지원하는 라이브러리입니다. 사용자가 파일을 드래그 앤 드롭하거나 클릭하여 선택하면, 업로드를 자동으로 처리해줍니다. Dropzone.js를 사용하려면 다음 스크립트를 HTML에 추가해야 합니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/min/dropzone.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/min/dropzone.min.css" rel="stylesheet">

Dropzone.js를 초기화하고 원하는 동작을 구현하려면 다음과 같이 자바스크립트 코드를 작성합니다.

var myDropzone = new Dropzone("div#myDropzone", { url: "/file-upload"});

myDropzone.on("complete", function(file) {
    // 업로드가 완료된 후 동작할 내용을 작성합니다.
});

FileSaver.js

FileSaver.js는 클라이언트 측에서 파일을 생성하고 사용자의 로컬에 다운로드하는 데 사용됩니다. 특히, Blob 객체나 파일을 다룰 때 유용하게 활용됩니다. FileSaver.js를 사용하기 위해 다음 스크립트를 HTML에 추가해야 합니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>

간단한 예제로 FileSaver.js를 사용하여 파일을 다운로드하는 방법을 살펴보겠습니다.

var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
saveAs(blob, "hello-world.txt");

Dropzone.js와 FileSaver.js는 어떻게 파일 업로드 및 다운로드를 처리하는지에 대한 간단한 소개였습니다. 더 자세한 기능과 옵션에 대해서는 각 라이브러리의 공식 문서를 참고하시기 바랍니다.

Dropzone.js

FileSaver.js

참고 자료