Uploading Directly to Amazon S3

General Uploads to S3

Please see the blog post on Fine Uploader S3.

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. 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.

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, you must also specify a bucket name via the objectProperties.bucket option. Please see the documentation for these options for more details.

Simplest Setup

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'
    }
});