[react native / 리액트 네이티브 / AWS S3] image-picker를 사용한s3 image upload, 이미지 업로드

먼저 s3 bucket을 사용하기 위해선 bucket을 만들고 Access Key를 발급받아야 한다.

https://gaebarsaebal.tistory.com/13

[AWS] AWS S3 bucket 정책 설정

https://gaebarsaebal.tistory.com/14

[AWS] AWS S3 Access Key 발급, 생성

 

그리고 s3에 업로드 하기 위해 필요한 라이브러리 설치

$ npm i aws-sdk
$ npm i react-native-fs
$ npm i buffer
# 설치 후
$ cd ios/
$ pod install

 

import 해주고

import AWS from "aws-sdk";
import RNFS from "react-native-fs";
import { Buffer } from "buffer";
import S3Config from "./config/awsS3config"; // S3 정보가 들어있는 파일

 

S3를 초기화 해준다

Key는 csv파일에 들어있는 Key값을 넣어주고

region은 내가 사용하는 S3의 region을 넣어주면 된다

const s3 = new AWS.S3({
	accessKeyId: S3Config.accessKeyID,
	secretAccessKey: S3Config.secretAccessKey,
	region: S3Config.region,
});

 

awsS3config.js

module.exports = {
	region: "your_region",
	bucket: "your_bucketName",
	accessKeyID: "your_accessKeyID",
	secretAccessKey: "your_secretAccessKey",
};

 

이미지를 선택했을 때 반환되는 이미지의 정보를 저장하기 위한 use State

const [imgConfig, setImgConfig] = useState(null);

 

이미지를 선택하면 useState 훅을 사용해서 imgConfig에 이미지의 정보를 넣어준다.

#react-native-image-picker 사용
 
const selectImage = () => {
		const options = {
			title: "사진 선택",
		};
 
		launchImageLibrary(options, async (response) => {
			if (response.didCancel) {
				console.log("사용자가 이미지 선택을 취소했습니다.");
			} else if (response.error) {
				console.log("ImagePicker 에러: ", response.error);
			} else if (response.customButton) {
				console.log("Custom button clicked :", response.customButton);
			} else {
				setImgConfig(response.assets[0]);
			}
		});
	};

 

이미지의 정보를 가지고 s3 bucket에 upload 해 준다 여기서 사용한 함수들은

• RNFS.readFile(imgConfig.uri, "base64"): 이 함수는 React Native File System (RNFS) 라이브러리의 함수입니다. 이 함수는 주어진 파일 경로(여기서는 imgConfig.uri)에서 파일을 읽어서 Base64 형식의 문자열로 반환합니다. 이 Base64 문자열은 이미지 데이터를 표현하는 방법으로, 나중에 AWS S3에 업로드할 때 사용됩니다.
• Buffer.from(fileData, "base64"): Node.js의 Buffer 클래스의 from 메소드입니다. 이 메소드는 주어진 데이터(여기서는 Base64로 인코딩된 파일 데이터)와 그 데이터의 형식(여기서는 "base64")을 사용하여 새로운 Buffer 인스턴스를 생성합니다. 이 Buffer 인스턴스는 AWS S3에 파일을 업로드할 때 사용됩니다.
• s3.upload(params, function (err, data) {...}): 이 함수는 AWS SDK의 S3 클라이언트의 메소드입니다. 이 메소드는 파일을 AWS S3 버킷에 업로드합니다. params는 업로드할 파일과 관련된 정보를 담은 객체입니다. 이 정보에는 버킷 이름, 파일 이름, 파일 데이터, 파일의 공개 권한, 파일의 컨텐츠 타입 등이 포함됩니다.

const uploadImageToS3 = async () => {
		return new Promise(async (resolve, reject) => {
			const fileData = await RNFS.readFile(imgConfig.uri, "base64");
 
			const params = {
				Bucket: S3Config.bucket,
				Key: imgConfig.fileName, // File name you want to save as in S3
				Body: Buffer.from(fileData, "base64"),
				ACL: "public-read",
				ContentType: imgConfig.type,
			};
 
			// Uploading files to the bucket
			s3.upload(params, function (err, data) {
				if (err) {
					reject(err);
				} else {
					setImageUrl(data.Location);
					console.log(`File uploaded successfully. ${data.Location}`);
					resolve(data.Location);
				}
			});
		});
	};