AWS S3 React

S3React is package for uploading images to Amazon AWS S3

npm install --save s3-react

Examples

Uploading to S3

1import S3React from 's3-react';
2
3const config = {
4    bucketName: 'myBucket',
5    albumName: 'photos',
6    fileName: 'me.png',
7    region: 'eu-west-1',
8    accessKeyId: 'JUSTSOME22RANDOM5EXAMPLEID',
9    secretAccessKey: 'ms21eg20+uMxçduyUxYjDANOTHERRANDOMEXAMPLESECRET',
10}
11
12/*  Notice that if you don't provide an albumName, the file will be automatically uploaded to the root of your bucket */
13
14
15
16S3React.upload(file, config)
17.then((data) => console.log(data))
18.catch((err) => console.error(err))
19
20
21  /**
22   * {
23   *   Response: {
24   *     bucket: "your-bucket-name",
25   *     key: "photos/image.jpg",
26   *     location: "https://your-bucket.s3.amazonaws.com/photos/image.jpg"
27   *   }
28   * }
29   */
30});

Deleting an existing file from your bucket

In this case the file that we want to delete is in the folder 'photos'

1import S3React from 's3-react';
2
3const config = {
4    bucketName: 'myBucket',
5    albumName: 'photos',
6    fileName: "my-image.png",
7    region: 'eu-west-1',
8    accessKeyId: 'JUSTSOME22RANDOM5EXAMPLEID',
9    secretAccessKey: 'ms21eg20+uMxçduyUxYjDANOTHERRANDOMEXAMPLESECRET',
10}
11
12
13/* If the file that you want to delete it's in your bucket's root folder, don't provide any albumName in the config object */
14
15//In this case the file that we want to delete is in the folder 'photos' that we referred in the config object as the albumName
16
17S3React.delete(config)
18.then((response) => console.log(response))
19.catch((err) => console.error(err))
20
21
22  /**
23   * {
24   *   Response: {
25   *      ok: true,
26          status: 204,
27          message: 'File deleted',
28          fileName: 'my-image.png'
29   *   }
30   * }
31   */
32});

S3 Bucket Policy

Doc: http://docs.aws.amazon.com/AmazonS3/latest/dev/example-bucket-policies.html

{
    "Version": "2024-02-28",
    "Id": "http referer policy example",
    "Statement": [
        {
            "Sid": "Allow all kind of http requests originating from http://www.your-website.com and https://www.your-website.com",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:PutObject",
                "s3:PutObjectAcl",
                "s3:GetObject",
                "s3:GetObjectAcl",
                "s3:DeleteObject"
            ],
            "Resource": "arn:aws:s3:::myBucket/*",
            "Condition": {
                "StringLike": {
                    "aws:Referer": [
                        "https://www.your-website.com",
                        "http://www.your-website.com"
                    ]
                }
            }
        }
    ]
}

Defaults your bucket to public-read : http://docs.aws.amazon.com/AmazonS3/latest/dev/acl-overview.html

config

• bucketName required - Your S3 bucket
• albumName optional - Your S3 folderName/albumName
• fileName optional - Your S3 folderName/albumName/fileName
• region required - Your S3 bucket's region
• accessKeyId required - Your S3 AccessKeyId
• secretAccessKey required - Your S3 SecretAccessKey

License

MIT

Reference given to https://github.com/Fausto95/react-s3

What's Changed ?

• Converted to typescript
• Addition of custom filename
• Update of dependencies and removal of legacy deps
• Clean up of stale code and types introduction
• More to come..