score:0

hi @spotlessthoughtful welcome to stackoverflow

the following guide describes how to setup & configure your react application with aws amplify:

outline

  1. configure s3 permissions in cognito
  2. setting up amplify
  3. using the storage sub-module
  4. setting up the s3 bucket

i am pretty sure it will help you to clarify any doubts you have.


highlights from the guide

example of uploading an image to s3 using aws amplify:

create a services.js file, and include the following functions:

import amplify from '@aws-amplify/core';
import storage from '@aws-amplify/storage';

export function configureamplify() {
  amplify.configure(
  {
   auth: {
     identitypoolid: process.env.react_app_identitypoolid,
     region: process.env.react_app_region,
     userpoolid: process.env.react_app_userpoolid,
     userpoolwebclientid: process.env.react_app_userpoolwebclientid,
    },
  storage: { 
     bucket: process.env.react_app_bucket_name,
     region: process.env.react_app_region,
     identitypoolid: process.env.react_app_identitypoolid
    }
  }
 );
}

//configure storage with s3 bucket information
export function sets3config(bucket, level){
   storage.configure({ 
          bucket: bucket,
          level: level,
          region: 'us-east-1',  
          identitypoolid: process.env.react_app_identitypoolid 
       });
}

in your index.js file:

import react, { component } from "react";
import reactdom from "react-dom";
import { configureamplify, sets3config } from "./services";
import storage from "@aws-amplify/storage";
import "./styles.css";

class app extends component {
  state = {
    imagename: "",
    imagefile: "",
    response: ""
  };

  uploadimage = () => {
    sets3config("my-test-bucket-amplify", "protected");
    storage.put(`userimages/${this.upload.files[0].name}`,
                this.upload.files[0],
                { contenttype: this.upload.files[0].type })
      .then(result => {
        this.upload = null;
        this.setstate({ response: "success uploading file!" });
      })
      .catch(err => {
        this.setstate({ response: `cannot uploading file: ${err}` });
      });
  };

  render() {
    return (
      <div classname="app">
        <h2>s3 upload example...</h2>
        <input
          type="file"
          accept="image/png, image/jpeg"
          style={{ display: "none" }}
          ref={ref => (this.upload = ref)}
          onchange={e =>
            this.setstate({
              imagefile: this.upload.files[0],
              imagename: this.upload.files[0].name
            })
          }
        />
        <input value={this.state.imagename} placeholder="select file" />
        <button
          onclick={e => {
            this.upload.value = null;
            this.upload.click();
          }}
          loading={this.state.uploading}
        >
          browse
        </button>

        <button onclick={this.uploadimage}> upload file </button>

        {!!this.state.response && <div>{this.state.response}</div>}
      </div>
    );
  }
}

configureamplify();
const rootelement = document.getelementbyid("root");
reactdom.render(<app />, rootelement);

Related Query

More Query from same tag