A simple file uploader using:
- aws-sdk
- multer & multer-s3
- AWS.S3.createPresignedPost()
3 ways of upload can be used:
- "Standard". Using the server as gateway to send files to the S3 bucket. With multiple files, returning all files info.
- With AJAX. Same as previous but using AJAX and filter only image files. Only one file, returning its URL.
- Straight from browser (Recommended). Calling the server only to require the Presigned URL used to post to the S3 bucket.
AWS_S3_BUCKET =
AWS_ACCESS_KEY_ID =
AWS_SECRET_ACCESS_KEY =
AWS_DEFAULT_REGION =
- In the Bucket name list, choose the name of the bucket that you want.
- Create a new folder with name some-folder.
- Choose Permissions.
- Choose Edit to change the public access settings for the bucket.
- Set ON the two ACL options.
- Set OFF the two bucket policies options.
- Click Save button.
- Choose Bucket Policy. In the Bucket policy editor text box, type or copy and paste a new bucket policy:
- Change [[Bucket-Name]] with the name of this bucket.
- Change [[Id-Account]] with the number or your AWS Id Account.
- Change [[Some-User]] with the user you'll use to edit the bucket.
This user doesn't need to have any permission.
{
"Version": "2012-10-17",
"Id": "Policy1488494182833",
"Statement": [
{
"Sid": "AllowPublicRead",
"Effect": "Allow",
"Principal": {
"AWS": "*"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::[[Bucket-Name]]/some-folder/*"
},
{
"Sid": "AllowUserEdit",
"Effect": "Allow",
"Principal": {
"AWS": "arn:aws:iam::[[Id-Account]]:user/[[Some-User]]"
},
"Action": "s3:PutObject",
"Resource": [
"arn:aws:s3:::[[Bucket-Name]]/some-folder",
"arn:aws:s3:::[[Bucket-Name]]/some-folder/*"
]
},
{
"Sid": "AllowUserList",
"Effect": "Allow",
"Principal": {
"AWS": "arn:aws:iam::[[Id-Account]]:user/[[Some-User]]"
},
"Action": "s3:ListBucket",
"Resource": "arn:aws:s3:::[[Bucket-Name]]"
}
]
}
- Click Save button.
- Choose CORS Configuration. In the CORS configuration editor text box, type or copy and paste a new CORS configuration:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>POST</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
- Click Save button.
After cloning the repo, you can start the app by:
$ npm install
$ npm run devOpen http://localhost:7000 in your browser to start ussing the app.
