Fine Uploader cannot draw thumbnail from amazon S3

Question

I have a form with a Fine Uploader and I am loading an initial file list (as described here)

For the list of initial files I am also returning the thumbnailUrl which points to my files in Amazon's S3.

Now I see that Fine Uploader is actually making an HTTP request to S3 and gets a 200 OK but the thumbnail is not displayed and this is what I see in the console:

[Fine Uploader 5.1.3] Attempting to update thumbnail based on server response.
[Fine Uploader 5.1.3] Problem drawing thumbnail!

Response from my server:

{"name": 123, "uuid": "...", "thumbnailUrl": "...."}

Now Fine Uploader makes a GET request to S3 to the URL specified in the thumbnailUrl property. The request goes like this:

curl "HERE_IS_MY_URL" -H "Host: s3.eu-central-1.amazonaws.com" -H "User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:39.0) Gecko/20100101 Firefox/39.0" -H "Accept: image/png,image/;q=0.8,/*;q=0.5" -H "Accept-Language: en-US,en;q=0.5" --compressed -H "DNT: 1" -H "Referer: http://localhost:9000/edititem/65" -H "Origin: http://localhost:9000" -H "Connection: keep-alive" -H "Cache-Control: max-age=0"

Response: 200 OK with Content-Type application/octet-stream

Is there any configuration option for Fine Uploader that I am missing? Could it be that this is a CORS-related issue?

Please add more information, such as details of the specific GET request (for the image) according to the browser dev tools and the initial file list data you are returning. — Ray Nicholus
@RayNicholus I updated the question with some more information — Anton
The content type is application/octet-stream? That doesn't sound like an image at all. Sounds like your server isn't providing an actual image. — Ray Nicholus
The content type application/octet-stream comes as part of the response from Amazon's S3, not from my server — Anton
Then the response from S3 doesn't appear to be an image. Without a sample URL from your S3 bucket, I'm not sure how I can help further. Otherwise, you can take a look at Fine Uploader's debug logs and/or step through the code to see what it is failing on. — Ray Nicholus

Ray Nicholus Ray Nicholus · Accepted Answer · 2015-07-06T20:53:01

Fine Uploader loads thumbnails at the URL returned by your initial file list endpoint using an ajax request (XMLHttpRequest) in modern browsers. It does this so it can scale and properly orient the image preview.

You'll need a CORS rule on your S3 bucket that allows JS access via a GET request. It will look something like this:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>http://example.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
    </CORSRule>
</CORSConfiguration>

Of course, you may need to allow other origins/headers/methods depending on whatever else you are doing with S3.

Fine Uploader cannot draw thumbnail from amazon S3

1 Answers