score:0
hi @spotlessthoughtful welcome to stackoverflow
the following guide describes how to setup & configure your react application with aws amplify:
outline
- configure s3 permissions in cognito
- setting up amplify
- using the storage sub-module
- 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);
Source: stackoverflow.com
Related Query
- How to interact with S3 using React and Amplify
- How do I store JWT and send them with every request using react
- how to change image src using props with styled component and react
- How to set up a chrome extension using React and TypeScript with multiple pages and entry points?
- How to Upload files in graphql using graphene-file-upload with apollo-upload-client to Python Database and react front-end.?
- How to draw a bubble map with longitude and latitude using Highcharts in react
- How to add event listener to the div element accessed with ref using react and typescript?
- How to integrate axios api in react js with async and await using react hooks
- How to fetch data from a custom React hook (API) with onClick and display it in a Div using TypeScript?
- How can i restrict user from not selecting other file types using input type file with react and typescript?
- How to handle when no search results are found using material-table with React and remote data
- How to click a button and navigate to a new route with URL params using React Router 4
- How do I unit test amcharts using jest with react and typescript?
- Im using React Router and I want one of my route links with path="/" to be the home page on reload.. How can you do that?
- How to test React component with children using jest and enzyme?
- I want to popup each item to view and edit . How can I do this using modal with router in react js?
- How to sign user in after registration using AWS Amplify and React
- How to create a div with arrow and divider for content such that they are aligned using react and css?
- How to replace the pattern in string with other string using react and regular expression?
- How to create a form with text and file input in react and send form data to server using Nodejs?
- How to create an input formfield with button that uploads a file using react and javascript?
- How to map through array of objects and create a new array of objects with a new added property using react and javascript?
- react with TS - using setInterval with useEffect() how to send the request and only then start the interval
- How can I add a user input with an output and be able to display using React Javascript/ Material UI
- how to write one GET api call using axios instance with and without params in React JS
- How do I create image maps (clickable areas on an image using <map >) with React and JSX?
- How to replace Login/SignUp with Log out using React and Bootstrap
- How to import and export components using React + ES6 + webpack?
- How to render react components by using map and join?
- How to test a className with the Jest and React testing library
More Query from same tag
- Add srcSet to styled-component themed image
- How to set a NavLink to active conditionally on dynamic links
- How to get EXIF orientation from img tag
- How to create an icon dinamically by its name?
- Multiple listeners & removeListener removes everything Socket.io
- React router-dom passing state from parent component to child router component showing undefined in child
- Material ui tool tip not closing when clicked on element
- How to target siblings / children of complex component in Material UI/JSS
- Filtering data after fetching in React
- React Function: TypeError: Object(...) is not a function
- Redux reducers -- changing deeply-nested state
- Commonly API call for different components in ReactJS Fetch
- useEffect appears to be triggered before render completion
- how to add footer to material ui drawer component?
- Hash history cannot PUSH the same path; a new entry will not be added to the history stack when i am changing state not pathname
- Disable button from clicking the parent element
- How to loop through complex object using Map in React
- How to resolve typescript error while exporting map component
- Formatting Youtube iFrame Embed and Maintain Black Side Bars
- Can't display image from Strapi in ReactJS (frontend)
- Following a pattern when rendering items
- How to iterate over components inside components in React
- ReactJS: Pass data to component to render in two Cols
- Getting Undefined When Trying to Request Const Data From Reactjs File in my NodeJS Express API
- react web app conditional app loading not working
- How do I get the range offsets of an entire div in Javascript?
- Unable to get dropdown value in reactjs
- Is it possible to use experimental version of React while using Create React App
- how can I dynamically attach sidebar components to multiple instances of sidebar?
- Promise.all Not Loading Images in React For Use In HTML Canvas