Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dabit3/basic-amplify-storage-example
A basic example app showing how to add storage with Amazon S3
https://github.com/dabit3/basic-amplify-storage-example
amazon-s3 amazon-s3-storage aws aws-amplify javascript react serverless
Last synced: 1 day ago
JSON representation
A basic example app showing how to add storage with Amazon S3
- Host: GitHub
- URL: https://github.com/dabit3/basic-amplify-storage-example
- Owner: dabit3
- Created: 2019-12-10T15:46:54.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2021-06-08T07:30:15.000Z (over 3 years ago)
- Last Synced: 2024-08-02T07:21:42.661Z (3 months ago)
- Topics: amazon-s3, amazon-s3-storage, aws, aws-amplify, javascript, react, serverless
- Language: JavaScript
- Size: 2.24 MB
- Stars: 48
- Watchers: 3
- Forks: 8
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-aws-amplify - Amplify Storage example
README
## Basic Storage example with AWS Amplify
Storing & querying for files with AWS Amplify and React
> The code in this app should be used for reference, but to recreate the app follow the below steps. You can also recreate this project by cloning it and running `amplify init`.
## Getting started
Create a new React app:
```sh
$ npx create-react-app my-app
$ cd my-app
```
Install the Amplify libraries:
```sh
$ npm install aws-amplify aws-amplify-react
```
Initialize a new amplify app:
```sh
$ amplify init
```
Next, add auth:
```sh
$ amplify add auth
? Do you want to use the default authentication and security configuration? Default configuration
? How do you want users to be able to sign in? Username
? Do you want to configure advanced settings? No
```
Next, add storage with Amazon S3:
```sh
$ amplify add storage
? Please select from one of the below mentioned services: Content
? Please provide a friendly name for your resource that will be used to label this category in the project:
? Please provide bucket name:
? Who should have access: Auth and guest users
? What kind of access do you want for Authenticated users? create, update, read, delete
? What kind of access do you want for Guest users? create, update, read, delete
? Do you want to add a Lambda Trigger for your S3 Bucket? N
```
### Configure the React app with Amplify
Open __src/index.js__ and add the following three lines of code:
```js
// src/index.js
import Amplify from 'aws-amplify'
import config from './aws-exports'
Amplify.configure(config)
```
## Platform specific components
### Photo Picker
```js
import React from 'react';
import { Storage } from 'aws-amplify'
import { PhotoPicker } from 'aws-amplify-react';
class App extends React.Component {
state = {
file: {}
}
onChange(data) {
console.log('data: ', data)
this.setState({ file: data.file })
}
saveFile = async () => {
const { file } = this.state
await Storage.put(file.name, file)
console.log('successfully saved file...')
}
render() {
return (
this.onChange(data)}
/>
Save File
)
}
}
export default App;
```
### S3 Image
```js
import React from 'react';
import { Storage } from 'aws-amplify'
import { S3Image } from 'aws-amplify-react';
class App extends React.Component {
state = {
files: [],
}
async componentDidMount() {
const files = await Storage.list('')
console.log('files: ', files)
this.setState({ files })
}
render() {
return (
{
this.state.files.map((f, i) => (
))
}
)
}
}
export default App;
```
### Photo Album
```js
import React from 'react';
import { S3Album } from 'aws-amplify-react';
class App extends React.Component {
render() {
return (
)
}
}
export default App;
```
### Manually working with the Storage API - storing an image
```js
// src/App.js
import React from 'react';
import { Storage } from 'aws-amplify'
class App extends React.Component {
onChange(e) {
const file = e.target.files[0];
Storage.put(file.name, file)
.then (result => console.log(result))
.catch(err => console.log(err));
}
render() {
return (
this.onChange(e)}
/>
)
}
}
export default App;
```
### Viewing a single file or image from a folder or array of images
```js
import React from 'react';
import { Storage } from 'aws-amplify'
class App extends React.Component {
state = {
files: [],
file: ""
}
componentDidMount() {
this.listFiles()
}
onChange(e) {
const file = e.target.files[0]
Storage.put(file.name, file)
.then (() => this.listFiles())
.catch(err => console.log(err));
}
listFiles = async () => {
const files = await Storage.list('')
this.setState({ files })
}
selectFile = async file => {
const signed = await Storage.get(file.key)
this.setState({ file: signed })
}
render() {
return (
this.onChange(e)}
/>
List Files
{
this.state.files.map((file, i) => (
this.selectFile(file)}>{file.key}
))
}
{
this.state.file && (
)
}
)
}
}
export default App;
```
### Viewing a list of images after storing them
```js
import React from 'react';
import { Storage } from 'aws-amplify'
class App extends React.Component {
state = {
files: []
}
onChange(e) {
const file = e.target.files[0]
Storage.put(file.name, file)
.then (() => this.listFiles())
.catch(err => console.log(err));
}
listFiles = async () => {
const files = await Storage.list('')
let signedFiles = files.map(f => Storage.get(f.key))
signedFiles = await Promise.all(signedFiles)
console.log('signedFiles: ', signedFiles)
this.setState({ files: signedFiles })
}
render() {
return (
this.onChange(e)}
/>
List Files
{
this.state.files.map((file, i) => (
))
}
)
}
}
export default App;
```
### Lambda Trigger for resizing images
Let's add a new Lambda function that will resize an image whenever we upload one to S3 to create thumbnails.
```sh
$ amplify update storage
? Please select from one of the below mentioned services: Content
? Who should have access: Auth & Guest users
? What kind of access do you want for Authenticated users? keep existing settings
? What kind of access do you want for Guest users? keep existing settings
? Do you want to add a Lambda Trigger for your S3 Bucket? Y
? Select from the following options: Create a new function
? Do you want to edit the local S3Triggerf985d3b6 lambda function now? Y
```
Let's update the function to resize images. Update this file with the following code:
```js
// amplify/backend/function//src/index.js.
const sharp = require('sharp')
const aws = require('aws-sdk')
const s3 = new aws.S3()
const WIDTH = 100
const HEIGHT = 100
exports.handler = async (event, context) => {
const BUCKET = event.Records[0].s3.bucket.name
// Get the image data we will use from the first record in the event object
const KEY = event.Records[0].s3.object.key
const PARTS = KEY.split('/')
// Check to see if the base folder is already set to thumbnails, if it is we return so we do not have a recursive call.
const BASE_FOLDER = PARTS[0]
if (BASE_FOLDER === 'thumbnails') return
// Stores the main file name in a variable
let FILE = PARTS[PARTS.length - 1]
try {
const image = await s3.getObject({ Bucket: BUCKET, Key: KEY }).promise()
const resizedImg = await sharp(image.Body).resize(WIDTH, HEIGHT).toBuffer()
await s3.putObject({ Bucket: BUCKET, Body: resizedImg, Key: `thumbnails/thumbnail-${FILE}` }).promise()
return
}
catch(err) {
context.fail(`Error resizing files: ${err}`);
}
}
```
Next, we need to make sure that the `sharp` library is installed. To do so, you can add a dependency in the `package.json` of the function.
#### amplify/backend/function//src/package.json
```json
"scripts": {
"install": "npm install --arch=x64 --platform=linux --target=10.15.0 sharp"
},
"dependencies": {
"sharp": "^0.23.2"
}
```
Finally, for sharp to work, we need to update the Node.js runtime to be __10.x__. To do so, open __/amplify/backend/function/S3Triggerf985d3b6/-cloudformation-template.json__ and update the __Runtime__ key:
```json
"Runtime": "nodejs10.x",
```
Now, to deploy the updated function, run the `push` command:
```sh
$ amplify push
```