Permission file uploading with AWS S3 and AWS Amplify

In this example, I'm going over how to create an easy way to upload files to AWS S3 via AWS amplify.

Before we get started, let's take a look at what we'll discuss.

• AWS amplify environments
• Setup AWS Amplify CLI
• How to deploy to each environment
• Deploying AWS S3 bucket with AWS Amplify
• Authentication to upload files
• Add storage
• Setting up aws-amplify in your front-end project

AWS Amplify environments

When it comes to different environments, there might be many reasons to use this feature. One scenario might be simply testing new features in development, or another could be feature based environments determined by a GitHub branch. This is helpful if you have multiple developers, or just want to test a branch in its out encapsulated code without having to disrupt anyone else.

In this example, I'm not going to go over any UI, or front end specific details, this example is just to show how you could use this logic for any front-end

Setup AWS Amplify CLI

To get started, install the aws cli globally on your machine with

npm install -g @aws-amplify/cli

At this point, if you haven't already, you should look into Configure the Amplify CLI for helping you step through the process of creating IAM & setting permissions that we're going to need later on. Then you're going to want to run the configuration with

amplify configure

This will prompt you with step by step instructions on how to go about configuring your profiles.

Deploying to environments

Deploying your code to each environment depends on your aws configuration you have set up. To set up your configuration you can simply use the aws cli to do this.

After you've set up your profile(s), you can check them out as needed with

amplify env checkout [profile-name]

Authenticate to upload files

Now that you're in your specified environment, you can run

amplify add auth

and then

amplify push

This will deploy the changes to your environment's stack in CloudFormation that we'll use later when uploading files. You can find out more here Set up and configure Amplify Auth

Add storage (S3)

Now that you've set up your authentication process for your environment, it's time to configure the S3 storage, do this by running

amplify add storage

This will give you more step by step guidance for what you're wanting to do with storage, for this example let's use the Content (Images, audio, video, etc.) section.

In the "S3 Access permissions" we want to select Auth/Guest Users for "Restrict access by"

In the "Auth/Guest Users access" we want to select Auth users only for "Who should have access"

Then create/update for "What kind of access do you want for Authenticated users"

Then read for "What kind of access do you want for Guest users"

If you want to continue with the rest of the selections, go ahead and go through the rest of the selections on your own. Once you're all set you can run

amplify push

to deploy your changes.

Setting up aws-amplify in your front-end project

Now that you have the backend all set up, you're ready to start using it in your project

If you're using angular (or any Javascript front-end) you can simply run

npm install aws-amplify

in your project.

If you're using Angular, you can simply add

import { Amplify } from 'aws-amplify';
import amplifyconfig from './amplifyconfiguration.json';

Amplify.configure(amplifyconfig);

to your main.ts file.

Once you have that all done, you can use the "uploadData" method to start uploading files.

import { uploadData } from 'aws-amplify/storage';

try {
const result = await uploadData({
key: filename,
data: file,
options: {
accessLevel: 'private', // defaults to `guest` but can be 'private' | 'protected' | 'guest'
onProgress // Optional progress callback.
}
}).result;
console.log('Succeeded: ', result);
} catch (error) {
console.log('Error : ', error);
}

You can find out more about uploading files and access levels from Upload files

There you have it, now you should have the basic understanding of how to upload files to S3 and setting up resources using AWS Amplify. For more information and documentation visit AWS amplify docs