AWS-SDK-V3 based javascript Client Manager
DO NOT RECOMMEND TO USE IN PRODOCTION YET
- client-side oriented, No need to go through 3rd backend server
- Promise-base functions with Order-Keeping Multiple file-upload
- Easy to use
- npm installation
$ npm i s3cm
- browser
<script src="https://cdn.jsdelivr.net/npm/s3cm/dist/index.js"></script>
-
CORS example(CORS) basically, AWS S3 is blocked by CORS, DO NOT USE IN PRODUCTION, use only when you have to test or study
[ { "AllowedHeaders": [ "*" ], "AllowedMethods": [ "HEAD", "GET", "PUT", "POST", "DELETE" ], "AllowedOrigins": [ "http://localhost:3000" ], "ExposeHeaders": [ "ETag", "x-amz-meta-custom-header" ] } ]
-
React.js
import React, { useState } from 'react'; import S3CM from 's3cm'; const App = () => { const [arr, setArr] = useState([]); const [stateText, setStateText] = useState('nothing'); // full information of configuration, see https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/clients/client-s3/interfaces/s3clientconfig.html const S3config = { region: 'ap-northeast-2', credentials: { accessKeyId: 'my-access-key', secretAccessKey: 'my-secret-key', }, }; const CMconfig = { bucket: 'my-bucket-name', key: 'my-location-directory(key)', array : {arr && arr} }; const s3cm = new S3CM(S3config, CMconfig); const uploadTest = async (files) => { setStateText('uploading..'); const response = await s3cm.upload(files); setArr(response); setStateText('uploaded'); }; const deleteTest = async () => {}; return ( <> <h1>React Test</h1> state : {setStateText} arr : {arr} <input type="file" accept="image/*" multiple onChange={(e) => { uploadTest(e.target.files); }} /> </> ); };
-
example
const s3cm = new S3CM( { region: 'ap-northeast-2', credentials: { accessKeyId: `abcdefg`, secretAccessKey: `23ifmo0sdfmopaellsdflle`, }, }, { bucket: 'coffee-main-1', key: 'board/398042/gallery', arr: ['apple.jpeg', 'banana404.png'], } );
-
param
S3config
: S3ClientConfigCMconfig
:const CMconfig = { bucket: 'your-bucket-name', key: 'your-key', array: arrFromYourDB, // [option] if not defined, return empty string array isDuplicatedFileNameAutoChange: true, // [option] default : true, if false throw error when upload duplcated name of file };
-
return
s3cm
-
example
// if upload 2 files each names '010.jpeg', 'zoo.png' // when array = ['abc.png', 'yeeeeeeeee.svg'] const arrUpdated = await s3cm.upload(files); console.log(arrUpdated); // ['abc.png', 'yeeeeeeeee.svg', '010.jpeg', 'zoo.png']
-
param
files
: Array of file object -
return
updated
arr
after uploading files
-
example
// if delete 'yeeeeeeeee.svg' // when array = ['abc.png', 'yeeeeeeeee.svg', '010.jpeg', 'zoo.png'] const arrUpdated = await s3cm.deleteByIndex(1); console.log(arrUpdated); // ['abc.png', '010.jpeg', 'zoo.png']
-
param
fileIndex
: number index of filename to be deleted -
return
updated
array
after uploading files
-
example
// if delete 'yeeeeeeeee.svg' // when array = ['abc.png', 'yeeeeeeeee.svg', '010.jpeg', 'zoo.png'] const arrUpdated = await s3cm.deleteByKey('yeeeeeeeee.svg'); console.log(arrUpdated); // ['abc.png', '010.jpeg', 'zoo.png']
-
param
fileKey
: string key of file to be deleted -
return
updated
array
after uploading files