We can provide our users access to a presigned URL in order to temporarily grant them access to a particular S3 object. The uploaded file will be placed exactly where your server instructed it to be placed and in the designated bucket. What are the best solutions for Uploading Files with Pre Signed URLs in React. Let’s read this article to find the best solution.

What is Pre Signed URLs in React?

You can provide your users access to a presigned URL to grant them access to a particular S3 object temporarily. A user can either READ the object or WRITE an object by using the URL (or update an existing object). You can make a pre-signed url that anyone can use to submit content straight to S3. The uploaded file will be placed precisely where your server instructed it to be identified and in the designated bucket. Consequently, uploads can go straight to S3 rather than being proxied through your server. This is a very potent idea, particularly for reducing your server’s complexity in handling potentially massive uploads.

How to Upload Files with Pre Signed URLs in React?

Option 1: Prerequisites 

To upload files with Pre Signed URLs in React, you need to install and configure the AWS CLI first.

Option 2: Project install

Let’s follow these steps:

• Clone the repository on Github. Install the prerequisites.

npm run setup

• Build the CDK stack.

npm run cdk-create-stack

• The resources of your newly constructed stack, presigned-url-dev, may now be seen in the Cloudformation console.
• Launch the react program. React applications must be executed because that is the url for which CORS has been configured.

npm run dev

Let’s test the application now; at the top, you’ll find an Upload to S3 button and a File input:

To upload a picture, click the Upload to s3 button, choose an image up to 1 MB in size, and then click the File Input button.

Option 3: Backend code 

Let’s open the backend/infra/app.ts file to begin with the backend. Below is where your application starts. PresignedUrlStack initialization is possible here.

new PresignedUrlStack(app, ${STACK_PREFIX}-${DEPLOY_ENVIRONMENT}, {
  stackName: ${STACK_PREFIX}-${DEPLOY_ENVIRONMENT},
  env: {
    region: DEPLOY_REGION,
  }, tags: {
      env: 'dev',
  },
});

Take a look at backend/infra/presigned-url-stack.ts.

The S3 bucket that will house your uploads is the first resource you create:

const s3Bucket = new s3.Bucket(this, id, {
  cors: [
    {
      allowedMethods: [
        s3.HttpMethods.GET,
        s3.HttpMethods.POST,
        s3.HttpMethods.PUT,
      ],
      allowedOrigins: [FRONTEND_BASE_URL],
      allowedHeaders: ['*'],
    },
  ],
});

You’ll access the bucket from your frontend, so you set up cors for it. When you access resources from another domain, configuring CORS is critical. Since your frontend is now hosted and the s3 bucket will be hosted on the domain, you must set up CORS because these are two separate domains.

Option 4: Build a component for React

Let’s build a component for React that has a file input field.

import React, { createRef } from 'react';

const UploadFile = (props) => {
  const fileUploadRef = createRef();

  const inputProps = {
    type: 'file',
    disabled,
    accept,
  };

  return (
    <span className={classes} onClick={() => fileUploadRef.current.click() }>
      <input {...inputProps} ref={fileUploadRef} />
    </span>
  );
}

The input field has been disabled and enclosed with a span. By doing so, you can change how the input field looks. It would be best to utilize refs to refer to the input field inside the React Component. To simulate clicking on the span and the input field, you add the onClick property to the span. The file selector dialog box will open as a result. You should add one event handler for file change once the files have been chosen in the upload dialog box to upload the file.

Conclusion

The solutions listed above are the best solutions for Uploading Files with Pre Signed URLs in React. We believe that they are useful for you. ITtutoria also welcomes other suggestions and approaches from you! If you have more questions about this issue, please leave a comment below. Thank you for reading; we are always excited when one of our posts can provide useful information on a topic like this!

Read more

→ How To Use React Onchange