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?

Answer 1

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.