How To Upload Image From Android To Amazon S3

by Filip Jerga

How to set up simple image upload with Node and AWS S3

A footstep-by-step guide explaining how to upload an paradigm or whatsoever file to Amazon S3 service.

This is the first part of a tutorial in which we volition handle the server (Node.js) role of the code.

I prepared a video tutorial on YouTube as well. You lot can find a link in the resources at the bottom of this article.

1. What we need to install & a short description.

multer: middleware for handling data files. Primarily used for uploading files. More than info: Npm Link

multer-s3: multer extension for an easy file upload to Amazon S3 service. More info: Npm Link

aws-sdk: necessary package to piece of work with AWS(Amazon Web Services). In our case S3 service. More info: Npm Link

Go to your projects and permit's install packages:

                npm install —-salvage multer multer-s3 aws-sdk

First, permit'due south create an business relationship on https://aws.amazon.com. Amazon offers an amazing complimentary tier yous can use for the 1st year. Subsequently login, search for S3 service.

Only said, S3 is a cloud service to shop files.

We need to create a Bucket. You lot can imagine a saucepan every bit a folder for your files. Choose a bucket name and the Region. Since this is a simple setup we are non interested in other configurations. (Default setup is ok — if something is not clear enquire in comments). Click "next" until you lot are on Review and create your saucepan.

1*ds5x2m5EbltvbBK6b-UJdQ — Saucepan cosmos

Navigate to your created saucepan and check your URL bar. Remember your bucket name (for me "medium-test") and region (for me "us-due east").

1*GYbZM5qHrPoto9Kgi7nryw — Cheque your Url bar.

Now, we need to go our secure credentials. Navigate through your account name to "my security credentials". Then "Access Keys" and Create New Admission Cardinal.

1*VAAk0eS8PyT-v-QdnGxoXg — My security credentials and Access Keys

1*kZNeP9KvC9hJRLyh6a7Abg — Create Access Key

Never share your keys with anyone! Temporary salve these keys to some file or download the Primal File, because we demand keys in club to prepare upward a file upload.

All right. Amazon Setup Done!

three. Go to Your Coding Editor

I volition not explain the nuts of Node or Express hither. This tutorial is focused simply on the file upload. If you are interested in the whole projection implementation, check my GitHub repository or picket the total tutorial. (You tin find links at the end of this blog mail service).

Create your file-upload service with the following implementation (commencement office):

Of import note: Never betrayal your secret credentials direct into file! Never share your undercover credentials! Consider to setup environment variables in your local environment or in case of deployed projects, variables in your cloud provider. All-time solution would exist to employ aws-profiles: https://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/loading-node-credentials-shared.html.

First, we are importing all our installed packages. The second part is to configure our AWS. We need to provide our hugger-mugger keys and region from the URL bar I showed you before.

After AWS configuration, nosotros can create an case of our Amazon S3. We are still not quite washed however. At present, allow'due south see the 2nd part of this implementation.

Now, nosotros can prepare a solution for a multer upload. We demand to provide function to the multer object with the following backdrop.

s3: case of Amazon S3 nosotros created before.
bucket: name of our bucket (in my instance: "medium-test")
acl: access control for the file ('public read' means that anyone can view files), yous can check all the available types here: amazon link
metada: callback office to fix metadata of uploaded files. Hither, I am setting additional metadata for a fieldName. You tin can see this data on the epitome bellow.

5. cardinal: callback part to set the key holding (under which key your file will be saved in your saucepan). In our example, we are making a timestamp of a current fourth dimension and saving this file under this proper noun. This mode our filename will always be unique, just you lot tin can choose any proper name you want.

1*vjRTskqhTeaGdVDNbtqWeQ — Uploaded file with a current time proper noun

Afterward all the setup, we are exporting the upload object in order to use it in other files.

4. Setup a road to upload epitome

We are nearly done, but users of our app nevertheless don't accept access to the epitome upload. We need to expose this functionality to them. Let's create an endpoint to save a file.

We are exporting our upload object that nosotros've created before and creating a new one from information technology. The new i is more specific with additional configuration for a single image upload. We are providing an 'image' value to it. This value is very important, because nosotros will ship our file to a server nether this key.

2nd part is road itself. Mail endpoint to '/prototype-upload'. Inside we call singleUpload. Do not forget to pass inside req and res, because multer volition go the file nosotros are sending to the server from the req object.

We are checking for an error. If there is none, we are sending back JSON with the value of our file location, which is simply an URL to the file on Amazon.

Aaaaand that's it! We can upload files to Amazon S3 At present. Pretty simple, what do yous think?

5. Let's test it out in Postman.

To see the results of our hard work, we demand to send a request to the server with an paradigm we desire to upload. In this part we volition test it via Postman. In the side by side office of the tutorial, we volition create an implementation in an Angular awarding.

If you don't have Postman, you can just download it equally a Google Chrome extension. Just search for 'postman google chrome extension'. Postman is an awarding to initialise, send, and test requests to the server in a unproblematic matter.

Transport a post request to an endpoint we created before. In my case I specified in node path of /image-upload.
Select Body of grade-data.
Provide the key of an image. Y'all'll notice that this is a fundamental we set up earlier in our lawmaking. Check a file and choose some file from your computer.
Ship the asking.

Yous should get back JSON with the URL of your uploaded file.

Voilà! That'due south it guys. This is a simple file upload for Node. In the next commodity, I will proceed with a frontend implementation for Angular.

If y'all similar this tutorial, feel free to check my full course on Udemy — The Complete Athwart, React & Node Guide | Airbnb style app.

Video Lecture: Youtube video

Completed Project: My github repository

Cheers,

Filip

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people go jobs as developers. Become started