⬆️
React에서 S3 Presigned URL을 이용한 파일 업로드/다운로드

· January 21, 2025 · 1 min read


☀️ 테스트 환경

  • node v20.16.0
  • yarn 1.22.22
  • react ^18.2.0

✋ 들어가며

지난 포스팅에서는 EC2에 올라간 SpringBoot 기반 웹어플리케이션에서 Presigned URL을 발급받는 과정을 알아보았다. 이번에는 발급받은 Presigned URL을 사용해서 Client(React)에서 S3로 파일을 직접 업로드/다운로드 하는 방법에 대해서 작성해보려고 한다.

🛠️ Presigned URL을 이용한 파일 업로드/다운로드

파일 업로드

import axios from "axios";
// File Object와 Presigned URL을 파라미터로 받아서 파일을 업로드
const uploadFile= async (file: File, presignedUrl: string) => {
  try {
    await axios.put(presignedUrl, file, {
      headers: {
        'Content-Type': file.type,
      },
    });
  } catch (e) {
    console.error(e);
  }
}

파일 다운로드

import axios from "axios";
// Presigned URL을 파라미터로 받아서 파일을 다운로드
const downloadFile = async (presignedUrl: string) => {
  const response = await fetch(presignedUrl);
  const blob = await response.blob();
  const url = window.URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = 'file';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  window.URL.revokeObjectURL(url);
}

👋

@rundevelrun
똑바로 해, 넌 정말