{% extends "_templates/base.html" %}
{% set page_title = "Uploading Directly to Amazon S3" %}
{% block sidebar %}
{% endblock %}
{% block content %}
{% markdown %}
# Uploading Directly to Amazon S3 {: .page-header }

### General Uploads to S3
Please see [the blog post on Fine Uploader S3][s3blog].


### Uploading to S3 Through a CDN
Support for uploads to an S3 bucket via a CDN was added in Fine Uploader 5.1.0.  You can upload files to
any S3 bucket through any CDN, provided the CDN forwards all headers and does not append any additional
headers to the request that is sent on to S3.

An example of a CDN that should work fine is [fastly][fastly].  An example of a CDN that does not appear
to work is, ironically, Amazon CloudFront.  There are a number of issues with CloudFront's support of POST
requests to S3.  First, CloudFront appends headers to the request.  To get around this, an Origin Access
Identity must be used, which makes the process quite complicated for integrators.  Second, multipart encoded
POSTs to an S3 bucket appear to fail when the endpoint is a non-default CloudFront behavior.  Third, there
does not appear to be any way to forward all headers to an S3 origin via a CloudFront endpoint.  This is
a problem for uploads using S3's REST API, since we must include the ACL, metadata, encryption, redundancy
parameters, and a number of other information via the Initiate Multipart Upload POST request.  We have notified
Amazon of these issues, but they have been unwilling to address or acknowledge them.  For continuing updates
on support to CloudFront, please see [issue #1016 in the Fine Uploader GitHub issue tracker][issue1016].

#### Overview
When uploading to S3 via a CDN, you must specify the name of the bucket.  This is not required for uploads
directly to S3, since Fine Uploader is able to determine the bucket name by examining the S3 endpoint URL.
This is obviously not the case for a CDN endpoint.  So, in addition to specifying the CDN endpoint via the
[`request.endpoint` option][requestendpoint], you must also specify a bucket name via the [`objectProperties.bucket` option][objectpropertiesbucket].
Please see the documentation for these options for more details.

#### Simplest Setup
```javascript
var uploader = new qq.s3.FineUploader({
    request: {
        endpoint: '{ YOUR_CDN_ENDPOINT_URL }'
        accessKey: '{ YOUR_ACCESS_KEY }'
    },
    objectProperties: {
        bucket: '{ YOUR_S3_BUCKET_NAME }'
    },
    signature: {
        endpoint: '/s3/signature'
    },
    uploadSuccess: {
        endpoint: '/s3/success'
    },
    iframeSupport: {
        localBlankPagePath: '/success.html'
    }
});
```


[fastly]: http://www.fastly.com/
[issue1016]: https://github.com/FineUploader/fine-uploader/issues/1016
[objectpropertiesbucket]: ../api/options-s3.html#objectProperties.bucket
[requestendpoint]: ../api/options-s3.html#request.endpoint
[s3blog]: http://blog.fineuploader.com/2013/08/16/fine-uploader-s3-upload-directly-to-amazon-s3-from-your-browser/

{% endmarkdown %}
{% endblock %}