[JAVASCRIPT] 클라이언트 단(front-end)에서 Amazon S3 서버로 파일 업로드

 

Amazon S3에서 버킷을 생성 후 권한 및 기본 설정을 완료한 뒤, 클라이언트단에서 form을 이용하여 s3서버로 업로드 하고 싶다면 html의 input file과 javascript를 이용하여 간단하게 업로드 할 수 있다.

---

 html 

<form name="" action="" onsubmit="checkSubmit()">
    <input type="file" name="upload" id="upload">
    <input type="submit">
    <!-- submit을 button으로 설정하고 클릭 시 uploadFile 함수를 호출하도록 적용할 수도 있다. -->
</form>

 

 javascript 

<script src="https://sdk.amazonaws.com/js/aws-sdk-2.809.0.min.js"></script> 
<script>
function checkSubmit(){
	uploadFile(document.getElementsByName("upload").files[0]); // files[0]을 해줘야 file의 데이터를 불러온다.
}
const uploadFile = file => {
    const albumBucketName = 'mybucket'; //버킷이름
    const region = 'ap-northeast-2'; //지역이름(아시아)
    const accessKeyId = "myAccessKeyId";
    const secretAccessKey = 'mySecretAccessKey'; 
    const folder = 'myfolder/'; // 버킷내부 폴더안에 파일을 업로드 하고 싶을 때 설정하면 된다.
    AWS.config.update({ // s3 업로드를 하기위한 설정을 해준다.
        region,
        accessKeyId,
        secretAccessKey
    }); 

    const upload = new AWS.S3.ManagedUpload({
        params: {
        Bucket: albumBucketName,
        Key: folder+file.name, // 파일이름을 변경하고 싶으면 file.name 대신 원하는 이름을 넣으면 된다.
        Body: file, 
        ACL: "public-read" // 다운로드 권한을 public으로 설정해 준다.
        }
    });
    
    const promise = upload.promise(); // promise 를 이용해 비동기로 upload를 호출한다.
    
    promise.then( // 업로드 완료 후 실행된다.
    	function(data) { // upload가 성공했을 경우 실행되는 함수.
        	document.frm.submit();
        },
        function(err) { // upload가 실패했을 경우 실행되는 함수.
        	return console.log(err.message);
        };
    };
};
</script>