C# AWS CORS Upload full example

C# AWS CORS Upload full example

AWS CORS allows your users to upload files directly to an AWS bucket securely. There are many benefits to storing files on S3 rather than on your local web server storage, such as life-cycle management, cost and allowing horizontal scaling. If you already upload users files to S3 then CORS removes the need for your website server to be the proxy server which will reduce load and bandwidth.

Step 1: Create a new bucket
Go to the S3 console and ‘Create Bucket’. As the names for buckets are global, it can take a little while to find one that is sensible and short. For this example we are using bucket-upload but substitute that for yours.

Step 2: Associate CORS Policy
While you are in the bucket page, it is best to add a CORS policy before you forget. Click into your new bucket and then view the Properties – Permissions – Edit CORS Configuration. You need to add a new policy there, this is the one I used, though you can be as restrictive or open as you like.

*
PUT
POST
GET
HEAD
3000
*

Step 3: Create a new user
Whilst in the AWS Console, go to the Identity and Access Management (IAM) page. You can use an already created user credentials, but for security I would recommend creating a fresh one just for this purpose. Once you have created a user, make sure to generate an access key for them, you will need these later. Finally, you need to give the user access to upload to the bucket so select your user and choose Attach User Policy. You can just use the one I have below, remember to change it to your bucket name created in Step 1.

Step 4: Create your policy document
When you send a request to upload a file, you also need to send a JSON document about the incoming file. There is some good documentation on the AWS website about what you can include. Again this is up to how secure and restrictive you want to be, I would recommend the content-length option to prevent people uploading gigs worth of data. You need to put this in the MyPolicy field below in the next step, or use the one I have prepared earlier.

Step 5: Create a signed request
Now we are done with AWS, we can jump into our IDE and start coding. Below is a class I created that will calculate the base64 policy created in the previous step and the signature from your secret key.

Step 6: HTML time
Probably the easiest step by far, just use a normal HTML form with a file input. Make note that the button executes an uploadFile() method that we’ll create in the next step.

Select a File to Upload

Step 7: JavaScript magic

You will need the variables from the CorsUpload class we created before, so you can include them into your page easily like this.

Then include a new .js script file with the contents below. The only thing you should change is the bucket name, but you can easily abstract that out and include in the CorsUpload script if you want to ‘genericise’ it.

And that’s it! Here are some of the helper methods referenced above. I have made the page just redirect to the uploaded image (will need to change the base URL if you aren’t using the Sydney region) but obviously change that to whatever you need. I ended up including it in a WYSIWYG editor and an email attachment so there isn’t any limit to it’s uses.