react-upload-to-s3

The all-in-one react-only component for uploading images, documents and videos to AWS S3. This is a pure front-end component and only requires AWS configuration at the backend, no backend code is necessary.

What's New

• Thumbnail auto generation and capture feature

How it can be used

Upload an image to S3 (with easy crop)

• Choose an image
• Preview it
• Crop it if required
• Upload to S3

Upload a video to S3 (with thumbnail generator & easy clip)

• Choose a video
• Preview the video and the generated thumbnail
• Capture a new thumbnail if required
• Clip the video from start and end if required
• Upload to S3

Upload a pdf to S3

• Choose a pdf
• Preview it
• Upload to S3

Demo

Install

1npm install --save react-upload-to-s3

Then install the dependencies

Dependencies

1npm install --save aws-sdk
2npm install --save bootstrap
3npm install --save react-bootstrap
4npm install --save react-bootstrap-icons
5npm install --save react-ui-components-superflows
6npm install --save react-ui-themes-superflows

Usage

Props

• bucket: Name of the S3 bucket
• cognitoIdentityCredentials: Cognito Identity Pool Object
• awsRegion: Region where the bucket exists
• awsKey: AWS Access Key (should come from environment variables)
• awsSecret: AWS Secret (should come from environment variables)
• awsMediaConvertEndPoint: AWS region specific mediaconvert endpoint
• type: can be image / video / pdf
• mediaConvertRole: Media convert role
• onResult: Result callback
• theme: UI Theme (optional)
• showNewUpload: Flag which enables the display of New Upload button on the success screen (optional, default value is true)

Usage Method 1 - Less Secure

1
2import React from 'react'
3
4import Themes from 'react-ui-themes-superflows'
5import { Col, Row, Container } from 'react-bootstrap';
6import { UploadToS3 } from 'react-upload-to-s3'
7import 'bootstrap/dist/css/bootstrap.min.css';
8
9const App = () => {
10
11    const theme = Themes.getTheme("Default");
12
13    return (
14        <Container className='mt-5'>
15        <Row className='justify-content-center'>
16            
17            <Col sm={12} xs={12} md={6} xxl={6}>
18            <UploadToS3 
19                bucket="myuploads"
20                awsRegion="awsRegion"
21                awsKey="awsAccessKey"
22                awsSecret="awsSecret"
23                awsMediaConvertEndPoint="https://*********.mediaconvert.<awsRegion>.amazonaws.com"
24                type="image"
25                mediaConvertRole="mediaconvert_role"
26                theme={theme}
27                showNewUpload={false}
28                onResult={(result) => {console.log('on Result', result);}} />
29            </Col>
30            
31        </Row>
32        </Container>
33     );
34
35}
36
37export default App
38

Usage Method 2 - More Secure

1
2import React from 'react'
3
4import Themes from 'react-ui-themes-superflows'
5import { Col, Row, Container } from 'react-bootstrap';
6import { UploadToS3 } from 'react-upload-to-s3'
7import 'bootstrap/dist/css/bootstrap.min.css';
8
9const App = () => {
10
11    const theme = Themes.getTheme("Default");
12
13    return (
14        <Container className='mt-5'>
15        <Row className='justify-content-center'>
16            
17            <Col sm={12} xs={12} md={6} xxl={6}>
18            <UploadToS3 
19                bucket="myuploads"
20                awsRegion="awsRegion"
21                cognitoIdentityCredentials={{
22                    IdentityPoolId: 'awsRegion:poolId',
23                }}
24                awsKey=""
25                awsSecret=""
26                awsMediaConvertEndPoint="https://*********.mediaconvert.<awsRegion>.amazonaws.com"
27                type="image"
28                mediaConvertRole="mediaconvert_role"
29                theme={theme}
30                showNewUpload={false}
31                onResult={(result) => {console.log('on Result', result);}} />
32            </Col>
33            
34        </Row>
35        </Container>
36     );
37
38}
39
40export default App
41

Configuration

AWS S3

• Create an S3 bucket via the AWS admin console, say name of the bucket is myuploads
• Set the bucket policy as follows

1{
2    "Version": "2012-10-17",
3    "Statement": [
4        {
5            "Sid": "PublicListGet",
6            "Effect": "Allow",
7            "Principal": "*",
8            "Action": [
9                "s3:List*",
10                "s3:Get*"
11            ],
12            "Resource": [
13                "arn:aws:s3:::myuploads",
14                "arn:aws:s3:::myuploads/*"
15            ]
16        }
17    ]
18}

• Set the cors policy as follows

1[
2    {
3        "AllowedHeaders": [
4            "*"
5        ],
6        "AllowedMethods": [
7            "PUT",
8            "POST",
9            "DELETE",
10            "GET"
11        ],
12        "AllowedOrigins": [
13            "*"
14        ],
15        "ExposeHeaders": []
16    }
17]

AWS MediaConvert

AWS mediaconvert is required for video processing. The clip selection happens at the client end, whereas the actual clipping is done by an AWS mediaconvert job. This requires a region specific endpoint and can be easily obtained from the aws cli (aws commandline).

1aws mediaconvert describe-endpoints --region <region>

Remember that this region specific endpoint also has to be provided as a prop to the upload-to-s3 component. (Refer to the Usage Section)

You will also have to create a mediaconvert role.

MediaConvert Role

• Goto IAM > Roles
• Select AWS Service as the trusted entity type
• Choose MediaConvert from the services dropdown
• Click next on add permissions & attach the following permissions to it - (1) Full access to the particular s3 bucket, (2) Access to the region specific endpoint of the API gateway
• Name the role as per your choice. I have named it mediaconvert_role. (Remember that this role name has to be given as a prop to the upload-to-s3 component, refer to the Usage section)

Authentication of AWS SDK

Method 1 - Pass Credentials Via Props (Less Secure)

• Create an SDK user via the AWS console so that you get access to aws region, aws access key and aws secret, i.e. aws credentials.
• Ensure that you preserve these credentials in a secure manner.
• It is especially important that these credentials be stored in the environment files and should never be pushed to a source repository such as git.
• For this SDK user, give create, add, edit, delete permissions to your S3 bucket via the AWS console. I usually give full access restricted to a particular bucket, like the one which we created in the S3 section above (given below).
• If you are planning to use this module for video upload, also provide permissions to elemental media convert (given below).
• An additional permission needs to be given for video processing, for using the passrole method privilege (given below).

Method 2 - Use AWS Cognito Federated Identities (Recommended Method)

• Create a new identity pool using Cognito.
• It will end up creating two roles, one for users authenticated via cognito and the second, for unauthenticated users
• Go to Roles in IAM
• If in your application, unauthenticated & authenticated users will be using this module, then you will need to give s3 and elemental mediaconvert permissions to both the roles.
• Else, since this module will always be behind the authentication wall, you will need to give s3 and elemental mediaconvert permissions to only the authenticated users role.
• For S3, a good idea would be to give full access restricted to the particular bucket (given below).
• If you are planning to use this module for video upload, also provide permissions to elemental media convert (given below).
• An additional permission is required for video processing for using the passrole method.
• An additional permission needs to be given for video processing, for using the passrole method privilege (given below).

S3 Permission (Needed For Both Methods)

1
2{
3    "Version": "2012-10-17",
4    "Statement": [
5        {
6            "Effect": "Allow",
7            "Action": [
8                "s3:*",
9                "s3-object-lambda:*"
10            ],
11            "Resource": "arn:aws:s3:::myuploads"
12        }
13    ]
14}
15

MediaConvert Permissions (Needed For Both Methods)

• For this SDK user, then give the user access to AWS mediaconvert via the AWS console. I have used AWSElementalMediaConvertFullAccess, which is a pre-created AWS policy for this. To find and attach this policy - Select your IAM user > Click add permissions on the user summary screen > Click attach existing policies directly > Search mediaconvert > Apply the AWSElementalMediaConvertFullAccess policy

Permission to Use PassRole For Video Processing (Needed For Both Methods)

• Create a new inline policy (for method 1, attach to the user, for method 2, attach to the role(s)) with the following json

1{
2    "Version": "2012-10-17",
3    "Statement": [
4        {
5            "Sid": "VisualEditor0",
6            "Effect": "Allow",
7            "Action": [
8                "iam:GetRole",
9                "iam:PassRole"
10            ],
11            "Resource": "arn:aws:iam::mediaconvert_role_id:role/*"
12        },
13        {
14            "Sid": "VisualEditor1",
15            "Effect": "Allow",
16            "Action": "mediaconvert:*",
17            "Resource": "*"
18        },
19        {
20            "Sid": "VisualEditor2",
21            "Effect": "Allow",
22            "Action": "iam:ListRoles",
23            "Resource": "*"
24        }
25    ]
26}
27

Once you are through with installing the dependencies and the AWS configuration, using the component becomes fairly simple. Please refer to the Usage above.

License

MIT © superflows-dev