이 포스트의 동영상 강의 URL
https://youtu.be/BRDw_rJ74vY
VIDEO
리액트 프로젝트를 만들기
npx create-react-app s3-react-file-upload
패키지 추가
npm i aws-sdk
npm i reactstrap
컴포넌트 생성
코드 작성
import './App.css';
import {useState} from "react";
import AWS from 'aws-sdk';
import { Row, Col, Button, Input, Alert } from 'reactstrap';const [progress , setProgress] = useState(0);
const [selectedFile, setSelectedFile] = useState(null);
const [showAlert, setShowAlert] = useState(false);const ACCESS_KEY = 'IAM의 ACCESS KEY';
const SECRET_ACCESS_KEY = 'IAM의 SECRET ACCESS KEY';
const REGION = "ap-northeast-2";
const S3_BUCKET = 'codegear-react-file-upload-test-bucket';
AWS.config.update({
accessKeyId: ACCESS_KEY,
secretAccessKey: SECRET_ACCESS_KEY
});
const myBucket = new AWS.S3({
params: { Bucket: S3_BUCKET},
region: REGION,
});const handleFileInput = (e) => {
const file = e.target.files[0];
const fileExt = file.name.split('.').pop();
if(file.type !== 'image/jpeg' || fileExt !=='jpg'){
alert('jpg 파일만 Upload 가능합니다.');
return;
}
setProgress(0);
setSelectedFile(e.target.files[0]);
}
upload 버튼 click시 function
const uploadFile = (file) => {
const params = {
ACL: 'public-read',
Body: file,
Bucket: S3_BUCKET,
Key: "upload/" + file.name
};
myBucket.putObject(params)
.on('httpUploadProgress', (evt) => {
setProgress(Math.round((evt.loaded / evt.total) * 100))
setShowAlert(true);
setTimeout(() => {
setShowAlert(false);
setSelectedFile(null);
}, 3000)
})
.send((err) => {
if (err) console.log(err)
})
}html
return (
<div className="App">
<div className="App-header">
<Row>
<Col><h1>File Upload</h1></Col>
</Row>
</div>
<div className="App-body">
<Row>
<Col>
{ showAlert?
<Alert color="primary">업로드 진행률 : {progress}%</Alert>
:
<Alert color="primary">파일을 선택해 주세요.</Alert>
}
</Col>
</Row>
<Row>
<Col>
<Input color="primary" type="file" onChange={handleFileInput}/>
{selectedFile?(
<Button color="primary" onClick={() => uploadFile(selectedFile)}> Upload to S3</Button>
) : null }
</Col>
</Row>
</div>
</div>
);App.css
.App-body {
background-color: #6d7b97;
min-height: 50vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-body .alert-message {
height: 50px;
background-color: #61dafb;
}App.js에 S3Upload 컴포넌트 추가
App.js에 S3Upload 컴포넌트를 추가합니다.
return (
<S3Upload/>
);빌드
터미널에서 다음 스크립트를 실행합니다.
npm run build
build 파일들
s3에 애플리케이션 업로드
build 폴더 아래에 있는 모든 파일을 s3에 업로드합니다.
S3에 빌드 파일 업로드
index.html URL 확인
index.html을 클릭해서 속성의 url을 확인한 후 브라우저에서 실행합니다.
index.html url 확인
권한 설정 변경
아래와 같이 접근오류가 발생할 경우
접근 오류
s3에 업로드한 모든 파일을 선택후 -> 퍼블릭으로 설정해줍니다.
퍼블릭 설정
최종화면
다시 index.html에 접속해보시면 다음과 같이 화면이 나옵니다.
최종화면
