How to upload files to Amazon S3 with Angular 2 and Webpack

One recurrent question lately is: How the **** do I magically teleport files to AWS S3 using Angular 2?

Fear not! Here is the answer!

Installation

I’m using the stack from angular2-webpack-starter(How to install it Here) because it’s fast and preconfigured so adapt this tutorial to your case.

npm install aws-sdk

aws-sdk is not WebPack’s best friend so some work need to be done.

Thankfully, Andrew H Farger did the work for us here :D.

You will have a small warning saying that it’s precompiled. No big deal.

Now we are going to prevent errors from parsing and typings.

In Webpack dev conf add :

module: {

  noParse: [

   /aws-sdk/

  ]

}

In src/custom-typings.d.ts, add:

interface Window {
  AWS?: any;
}

Let's Code Now

You need to use the pre-compiled version of aws-sdk in dist otherwise you will have some errors.

In your component file, import aws-sdk:

import { Component } from '@angular/core';

require('aws-sdk/dist/aws-sdk');

In the template, just a file input, which on change will trigger fileEvent with the event:

<input type="file" (change)="fileEvent($event)" />

Get the AWSService from Window since AWS dist's puts it there and Voila! You have your AWS S3 ready to be loaded.

A very simple fileEvent method in the class.

Get the files -> select the first one -> configure AWS -> create a new S3 object and finally upload using this object and display the results.

export class ImportFilePage {
  constructor() {}

  fileEvent(fileInput: any) {
    var AWSService = window.AWS;

    var file = fileInput.target.files[0];

    AWSService.config.accessKeyId = "SpongeBob";

    AWSService.config.secretAccessKey = "Power";

    var bucket = new AWSService.S3({ params: { Bucket: "Ice" } });

    var params = { Key: file.name, Body: file };

    bucket.upload(params, function(err, data) {
      console.log(err, data);
    });
  }
}

It's as simple as this.

You might be interested in this analyze of the full-stack project created by the Ionic and AWS teams, many services from the new AWS Mobile Hub are detailed: AWS S3, Cognito, DynamoDB.

PS: I wrote this article with a focus on using AWS with Angular 2 and Webpack. In the comments you'll see how to make it secure by signing your credentials server-side with a Base64 policy.