One recurrent question lately is: How the **** do I magically teleport files to AWS S3 using Angular 2?
Fear not! Here is the answer!
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.
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 :
In src/custom-typings.d.ts, add:
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:
In the template, just a file input, which on change will trigger fileEvent with the 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.
It’s as simple as this. Don’t hesitate to comment if you need some help with your config :).
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.