Create Uploader

Create Uploader

Bucket Policies

In order to upload direct to your bucket, you need to give permission to do so. You do this through the bucket policies and CORS configuration.

These are automatically created for you, but you will need to add the following policy to your bucket.

{
"Version": "2008-10-17",
"Id": "Policy1347353974574",
"Statement": [
    {
        "Sid": "Stmt1347353957341",
        "Effect": "Allow",
        "Principal": {
            "AWS": "arn:aws:iam::718571690658:user/s3uploader.com"
        },
        "Action": "s3:*",
        "Resource": "arn:aws:s3:::[bucket name]/*"
    }
]
}

You can find out more information about policies on the Amazon website.

You will need to add the following CORS policy to your bucket.

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>https://s3uploader.com</AllowedOrigin>
        <AllowedMethod>PUT</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <ExposeHeader>Date</ExposeHeader>
        <ExposeHeader>ETag</ExposeHeader>
        <ExposeHeader>x-amz-server-side-encryption</ExposeHeader>
        <ExposeHeader>x-amz-request-id</ExposeHeader>
        <ExposeHeader>x-amz-id-2</ExposeHeader>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

You can find out more information about CORS on the Amazon website.

Embed Uploader

You are now ready to embed your uploader into your website. Simply copy & paste the generated code into your site where you want your uploader to appear.

<div id="s3uploader"></div>
<script>
var _s3config = {
	licence: 'abdce12345',
	width: 400
};
var _s3url = "https://s3uploader.com/remote/embed.js";

(function(d,s,a){var b,fjs=d.getElementsByTagName(s)[0];
if(d.getElementById(a))return;b=d.createElement(s);
b.id=a;b.src=_s3url;fjs.parentNode.insertBefore(b,fjs)}
(document,'script','s3uploader-embed'));
</script>

Callbacks

An additional callback parameter can be added to the config of the embedded uploader script.

onComplete

When a file has finished uploading, you can utilise the onComplete callback to handle any data passed back to the uploader.

<script>
var _s3config = {
	licence: 'abdce12345',
	width: 400,
	onComplete: function(data){
		...
	}
};
</script>

{
    "total_time":3,
    "url":"https:\/\/s3.amazonaws.com\/mybucket\/31a17_Example-File.jpg",
    "upload_path":"31a17_Example-File.jpg",
    "upload_id":"87d892c2bcdb815368fe2058df320e64",
    "original_file_size":"7178864",
    "original_filename":"Example File.jpg"
}