양파개발자 실바의 블로그

JavaScript: 파일 업로드/다운로드

JavaScript를 사용하여 파일을 업로드하고 다운로드하는 방법입니다. AWS presigned URL을 사용한 업로드와 Blob을 사용한 다운로드를 포함합니다.


1. 파일 업로드

AWS presigned URL을 발급받아 파일을 업로드하는 예제입니다.

/**
 * 파일 업로드
 * @param {File} file - 파일 객체
 * @param {string} path - 업로드될 AWS S3 path
 * @returns {Promise<string>} 업로드된 파일 URL
 */
async function fileUpload(file, path) {
    const form = new FormData()
    form.append('file', file)
    form.append('path', `images/${path}`)

    try {
        const uploaded = await ApiController.post('/file-upload', form, {
            headers: {'Content-Type': 'multipart/form-data'},
        }).then((response) => response.data)

        return uploaded.file_url
    } catch (error) {
        console.error('파일 업로드 실패:', error)
        throw error
    }
}

2. 파일 다운로드

Blob 응답을 받아 파일을 다운로드하는 예제입니다.

/**
 * 파일 다운로드
 * @param {string} url - 다운로드할 파일 URL 또는 API endpoint
 * @param {string} filename - 저장할 파일명 (선택사항)
 */
async function fileDownload(url, filename = null) {
    try {
        const response = await ApiController.get(url, {
            responseType: 'blob',
        })

        // Content-Disposition 헤더에서 파일명 추출
        const contentDisposition = response.headers['content-disposition']
        let downloadFilename = filename || 'downloaded_file'
        
        if (contentDisposition) {
            const fileNameMatch = contentDisposition.match(/filename="?(.+)"?/i)
            if (fileNameMatch && fileNameMatch.length === 2) {
                downloadFilename = fileNameMatch[1]
            }
        }

        // Blob 생성 및 다운로드
        const blob = new Blob([response.data])
        const downloadUrl = window.URL.createObjectURL(blob)
        const link = document.createElement('a')
        link.href = downloadUrl
        link.setAttribute('download', downloadFilename)
        document.body.appendChild(link)
        link.click()
        link.parentNode.removeChild(link)
        window.URL.revokeObjectURL(downloadUrl)
    } catch (error) {
        console.error('파일 다운로드 실패:', error)
        throw error
    }
}