Angular.js and Amazon S3 - How to Upload files?

Question

I have an application in Angular.js. In the truth, I made an update in my old site, changed that for Angular.

In old version, I was using Uploadfy jquery component for my uploads in Amazon S3. But now, with Angular, I can't use this.

I want to use the directive "ngUpload". But I don't know how to do this. Anybody can help-me?

Solution 1

You can use angular-file-upload a lightweight angular directive which has support for file progress and file drop.

You can follow the Amazon S3 issues here which has a sample code as how to send all those data along with the file upload: https://github.com/danialfarid/angular-file-upload/issues/23

S3 upload should work with version 1.1.1 above.

another related issue: https://github.com/danialfarid/angular-file-upload/issues/23

Solution 2

You can upload directly to an S3 bucket from an HTML form if you include valid S3 parameters in your POST data. These are called pre-authorized HTML POST forms.

The valid parameter values are generated on your own hosting server through an API call to the AWS API. The values are then added to your upload form as hidden input fields.

Here's what they look like in your form:

  <input type="hidden" name="AWSAccessKeyId" value="YOUR_AWS_ACCESS_KEY"> 
  <input type="hidden" name="acl" value="private"> 
  <input type="hidden" name="success_action_redirect" value="http://yourdomain/">
  <input type="hidden" name="policy" value="YOUR_POLICY_DOCUMENT_BASE64_ENCODED">
  <input type="hidden" name="signature" value="YOUR_CALCULATED_SIGNATURE">

Amazon provides sample code for Java, Python and Ruby.

http://aws.amazon.com/articles/1434

Solution 3

You can do this using a "public" IAM account and API key with the AWS JS SDK if you want to process the files after upload and move them elsewhere. For example, to process and store an uploaded file.

Using Angular, AWS S3 JS SDK, CORS and IAM accounts. There's a bit of setup involved to lock it down so it doesn't get abused though.

I'v documented the process of setting this up here: http://www.cheynewallace.com/uploading-to-s3-with-angularjs/