JavaScript로 간단한 파일 업로드와 관리 시스템 만들기

 

파일 업로드는 많은 웹 애플리케이션에서 중요한 기능입니다. 특히 사용자로부터 이미지를 업로드받거나 첨부 파일을 관리해야 하는 경우, 직관적이고 효율적인 파일 업로드 시스템이 필요합니다. 이번 글에서는 JavaScript와 jQuery를 활용해 간단한 파일 업로드 및 관리 시스템을 만드는 방법을 설명합니다. 초보자도 따라 할 수 있도록 단계별로 풀어내 보았습니다.

 

---

드래그 앤 드롭과 파일 선택의 조합

먼저, 파일 업로드의 핵심은 사용자가 쉽고 편리하게 파일을 업로드할 수 있도록 하는 것입니다. 드래그 앤 드롭 방식과 파일 선택 버튼을 동시에 제공하면 사용자 경험이 크게 향상됩니다. 아래 코드는 드래그 앤 드롭 영역을 설정하고, 파일이 드래그되었을 때와 드롭되었을 때의 동작을 정의합니다.

const dropArea = $("#dropArea");
dropArea.on("dragover", function (e) {
    e.preventDefault();
    dropArea.css("border-color", "blue"); // 드래그 중 표시
});

dropArea.on("dragleave", function (e) {
    e.preventDefault();
    dropArea.css("border-color", "#ccc"); // 드래그 해제 시 원래대로
});

dropArea.on("drop", function (e) {
    e.preventDefault();
    dropArea.css("border-color", "#ccc"); // 드롭 시 원래대로
    const files = e.originalEvent.dataTransfer.files;
    if (files.length > 0) {
        processFiles(files, "uploads");
    }
});

사용자가 파일을 드래그하면 영역의 테두리 색상을 변경해 드래그 상태를 시각적으로 표현했습니다. 드롭된 파일은 processFiles 함수로 넘겨 추가 작업을 수행합니다.

---

중복 파일 방지

파일 업로드 시스템에서 자주 발생하는 문제 중 하나는 동일한 파일을 여러 번 업로드하는 것입니다. 이를 방지하기 위해 업로드된 파일 이름을 저장하고, 중복된 파일이 다시 업로드되지 않도록 필터링하는 코드를 작성했습니다.

const uploadedFiles = new Set(); // 업로드된 파일 이름을 저장

function filterAndProcessFiles(files) {
    const newFiles = [];
    for (let i = 0; i < files.length; i++) {
        if (!uploadedFiles.has(files[i].name)) {
            uploadedFiles.add(files[i].name);
            newFiles.push(files[i]);
        }
    }
    if (newFiles.length > 0) {
        processFiles(newFiles, "uploads");
    }
}

이 코드를 통해 중복 파일은 무시되고, 새로운 파일만 처리되도록 보장합니다.

---

Google Drive API와의 연동

파일을 단순히 서버에 저장하는 것만으로 끝나는 것이 아니라, Google Drive와 같은 클라우드 저장소를 활용하면 저장 공간 관리가 더 유연해집니다. 아래 코드는 파일을 Google Drive API와 연동해 업로드하는 방식의 간단한 예입니다.

$.ajax({
    enctype: 'multipart/form-data',
    processData: false,
    contentType: false,
    url: "/filedrive/fileprocess.php",
    type: "POST",
    data: formData,
    success: function (response) {
        console.log("응답 데이터:", response);
        if (response.status === "success") {
            console.log("업로드 성공");
        }
    },
    error: function (jqxhr, status, error) {
        console.error("업로드 실패:", jqxhr, status, error);
    },
});

업로드 요청에 성공하면 Google Drive에 파일이 저장됩니다. 파일과 관련된 정보를 JSON 형식으로 응답받아 추가 작업에 활용할 수 있습니다.

---

업로드된 파일 표시

사용자가 업로드한 파일은 화면에 실시간으로 표시해주는 것이 좋습니다. 이를 통해 사용자는 자신이 업로드한 파일을 확인하고, 필요시 삭제할 수도 있습니다. 아래는 업로드된 파일을 목록 형태로 표시하는 코드입니다.

function displayFile() {
    $.ajax({
        url: '/filedrive/fileprocess.php',
        type: 'GET',
        data: { item: 'attached', folderPath: 'uploads' },
        dataType: 'json',
    }).done(function (data) {
        $("#displayFile").html('');
        if (Array.isArray(data) && data.length > 0) {
            data.forEach(function (file) {
                $("#displayFile").append(`
                    <div>
                        <a href="${file.link}">${file.realname}</a>
                        <button onclick="deleteFile('${file.fileId}')">삭제</button>
                    </div>
                `);
            });
        } else {
            $("#displayFile").html('<p>업로드된 파일이 없습니다.</p>');
        }
    }).fail(function () {
        console.error("파일 목록을 불러오는 데 실패했습니다.");
    });
}

---

삭제 기능의 추가

업로드된 파일을 삭제하는 기능도 필수적입니다. 아래는 삭제 버튼을 클릭했을 때, 서버로 삭제 요청을 보내고 성공적으로 삭제되면 화면에서 해당 파일을 제거하는 코드입니다.

function deleteFile(fileId) {
    $.ajax({
        url: '/filedrive/fileprocess.php',
        type: 'DELETE',
        data: JSON.stringify({ fileId: fileId }),
        contentType: "application/json",
        success: function (response) {
            if (response.status === "success") {
                console.log("삭제 완료");
                $(`#file${fileId}`).remove();
            }
        },
        error: function () {
            console.error("삭제 실패");
        },
    });
}

삭제 요청이 성공적으로 처리되면 해당 파일이 화면에서 즉시 사라집니다.

---

직관적인 사용자 경험을 위한 UI

파일 업로드 시스템은 기능도 중요하지만, 사용자 인터페이스(UI)가 직관적이어야 합니다. 업로드 상태를 표시하는 로딩 바, 업로드 성공 여부를 알려주는 알림 등을 추가하면 사용자는 더 신뢰감을 갖게 됩니다. 이 코드는 Toastify를 활용해 업로드 상태를 알리는 예입니다.

Toastify({
    text: "파일이 성공적으로 업로드되었습니다.",
    duration: 2000,
    close: true,
    gravity: "top",
    position: "center",
    backgroundColor: "#4fbe87",
}).showToast();

---

구현 마무리

이 글에서는 JavaScript와 jQuery를 활용해 기본적인 파일 업로드 시스템을 만드는 방법을 살펴보았습니다. 드래그 앤 드롭, 중복 파일 방지, Google Drive 연동, 파일 표시 및 삭제 등 실무에서 자주 사용되는 기능을 담았습니다. 이 시스템은 초보자도 손쉽게 구현할 수 있으며, 필요에 따라 더 발전시킬 수 있습니다.

작은 변화로도 더 나은 사용자 경험을 제공할 수 있다는 점을 기억하며, 구현한 코드를 프로젝트에 자유롭게 활용해 보세요.