CODEWITHSUNDEEP
phpfile-uploadamazon-web-servicesamazon-s3cors
Keon Ramezani
Keon Ramezani

Reputation: 388

Direct browser upload to Amazon S3

I'm trying to figure out how perform a browser direct upload to Amazon S3 using an XHR. I'm using some pre-made code that creates a signature and performs the upload. All I have to do is enter my S3 security credentials. (For what it's worth, I want to do the policy signing using PHP).

I've forked the code to my GitHub account, you can find it here: https://github.com/keonr/direct-browser-s3-upload-example

As the readme file indicates, I have set my S3 bucket CORS to allow all origins, as such: 

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>PUT</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Content-Type</AllowedHeader>
        <AllowedHeader>x-amz-acl</AllowedHeader>
        <AllowedHeader>origin</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

Now, when I try to perform the file upload, the script returns with XHR Error and my browser's error console gives me a standard CORS error, saying that my Origin is now allowed for that XHR request. I've tried everything I can think of. I've chaned the * wildcard to the actual domain the request originates from to allowing the * wildcard to allowed headers. Nothing seems to work. It continues to produce that CORS error.

Can anyone help me get this off the ground and successfully complete a direct browser upload to S3? I don't care by which means, I just need to be able to get it done. Also, bear in mind that I am a novice when it comes to S3, so the more explicit the instructions, the better.

Thanks!

Upvotes: 3

Views: 2089

Answers (1)

Portable Page
Portable Page

Reputation: 239

Try adding a wildcard for the AllowedHeader and allow all methods, like so:

<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

Great starting points for a direct upload to Amazon S3 are:

For the js: http://www.designedbyaturtle.co.uk/2013/direct-upload-to-s3-with-a-little-help-from-jquery/

For the php: http://birkoff.net/blog/post-files-directly-to-s3-with-php/

Or if you're looking for a solution that works out of the box, take a look at Plupload

Hope this gets you started!

Upvotes: 1

Related Questions