CODEWITHSUNDEEP
javascriptangularjsamazon-s3
Andrew Thomas
Andrew Thomas

Reputation: 2492

Upload files from browser to S3

I have a pre signed url that allows you to PUT documents objects into S3. http://docs.aws.amazon.com/AmazonS3/latest/dev/UploadObjectPreSignedURLDotNetSDK.html

How do I put a file from the browser to S3 using javascript? I am using angular, but I am open to using any javascript library.

I believe I could POST to my server, and then PUT the object on the amazon server, but I would prefer to do it from the browser.

I have changed the CORS settings on S3 to allow PUTs.

I was planning to use angular file upload, but it is hard coded to POST not PUT. https://github.com/danialfarid/angular-file-upload

Upvotes: 1

Views: 2326

Answers (1)

ijprest
ijprest

Reputation: 4228

Amazon has a guide (here) that describes how to POST-upload a file into your S3 bucket. It relies on an input <form> signed with your AWS private key. You can specify restrictions on the target directory, as well as file-size restrictions.

It's a bit annoying to use, because you have to duplicate most of the fields in both the <form> and the signed policy, but it seems to work.

After the POST, S3 will redirect the browser to a URL you specify in the form (with parameters specifying the name of the uploaded file, etc.). This isn't ideal for Angular web sites, which tend to be "applications" rather than a set of discrete pages, but you could probably work with it.

On my Angular site, I did the POST in Javascript using $http.post() and passed all the appropriate form data. Unfortunately, I was always getting "cancelled" errors, even though the uploads were actually successful. In my case, I just double-checked by downloading the file with $http.get() and comparing it to the original data... but this was only a viable solution because my files were only a couple of KB.

Upvotes: 1

Related Questions