Amazon S3 is not serving files correctly

Question

I made this site for my friend and I uploaded it to an Amazon S3 bucket (http://ballard26.s3.amazonaws.com/index.html) and when I go to that site the page doesn't load correctly and I have no idea why. Any ideas?

For example, the stylesheet.css doesn't load correctly. If you go to http://ballard26.s3.amazonaws.com/stylesheet.css, it downloads the file instead of loading it as CSS.

Answer 1

Check the mime types (HTTP content type header) on the files you uploaded. S3 does not always set them correctly. You may need to set them on the upload API call. Some upload libraries will do this for you.

If the mime types are not correct when the file is downloaded from the browser from S3 if the mime type is not set correctly it will not always render correctly.

Answer 2

CSS files default to a MIME type of octet/binary. To correct this, sign into your AWS Management Console, go to the Amazon S3 section and find the relevant bucket. Locate the CSS file and select Properties. Under Metadata, set the Content-Type key to value: text/css

If you use Panic’s Transmit app for Mac OS X, you can set a Custom Upload Header for CSS files of Content-Type: text/css which will apply the correct MIME type every time you upload a file, removing the need to manually set this in your Console each time.

More info on this is in Adam Wilcox’s blog post.

Answer 3

I would guess that you did not specify or set the mime-type of the file properly when uploading the file. As a result, it is defaulting to binary/octet-stream.

When you load your page, your browser is assuming that the stylesheet you specified is not a CSS file, since it is being served with a content-type other than text/css, and so is not applying the style sheet.

Answer 4

I had the same problem in IE due to incorrect content-type of our CSS / JS files.

If you are using Ruby and the AWS gem, use the code this:

s3 = Aws::S3Interface.new($s3[:s3_access_key_id],$s3[:s3_secret_access_key],{:multi_thread => true});
s3.put($s3[:s3_bucket],s3_path,file[:tempfile].read,{'x-amz-acl' => 'public-read', 'content-type' => 'text/css' })

Notice the different syntax for the S3 Metadata:

'content-type' => 'text/css'