Browser-Based Uploads to Amazon S3 Using the Amazon Amplify Library - Amazon Simple Storage Service
Using the Amazon Amplify JavaScript library to Upload Files to Amazon S3More Info
Services or capabilities described in Amazon Web Services documentation might vary by Region. To see the differences applicable to the China Regions, see Getting Started with Amazon Web Services in China (PDF).

Browser-Based Uploads to Amazon S3 Using the Amazon Amplify Library

This section describes how to upload files to Amazon S3 using the Amazon Amplify JavaScript library.

For information about setting up the Amazon Amplify library, see Amazon Amplify Installation and Configuration.

Using the Amazon Amplify JavaScript library to Upload Files to Amazon S3

The Amazon Amplify library Storage module gives a simple browser-based upload mechanism for managing user content in public or private Amazon S3 storage.

Example : Amazon Amplify Manual Setup

The following example shows the manual setup for using the Amazon Amplify Storage module. The default implementation of the Storage module uses Amazon S3. 

import Amplify from 'aws-amplify';
Amplify.configure(
    Auth: {
        identityPoolId: 'XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab', //REQUIRED - Amazon Cognito Identity Pool ID
        region: 'XX-XXXX-X', // REQUIRED - Amazon Cognito Region
        userPoolId: 'XX-XXXX-X_abcd1234', //OPTIONAL - Amazon Cognito User Pool ID
        userPoolWebClientId: 'XX-XXXX-X_abcd1234', //OPTIONAL - Amazon Cognito Web Client ID
    },
    Storage: {
        bucket: '', //REQUIRED -  Amazon S3 bucket
        region: 'XX-XXXX-X', //OPTIONAL -  Amazon service region
    }
);
Example : Put data into Amazon S3

The following example shows how to put public data into Amazon S3.

Storage.put('test.txt', 'Hello')
        .then (result => console.log(result))
        .catch(err => console.log(err));

The following example shows how to put private data into Amazon S3.

Storage.put('test.txt', 'Private Content', {
        level: 'private',
        contentType: 'text/plain'
    })
    .then (result => console.log(result))
    .catch(err => console.log(err));

For more information about using the Amazon Amplify Storage module, see Amazon Amplify Storage.

More Info

Amazon Amplify Quick Start