ralphmorris's avatar

S3, Cloudfront, Dropzone - serving images as soon as uploaded. Images return 404 even though upload successful

Wonder if anyone has any advice on what to do in this situation.

I have a form using Dropzone to upload multiple files to S3 and then upon success on the ajax request, serves the image on the page.

Just using S3 this works fine however using Cloudfront, if the success method runs too soon then the object doesn't seem to exist in S3 and so Cloudfront returns a 404 and then caches it.

However if I don't serve the image right away and just manually refresh the page a few seconds later, the images are all there.

Does anyone have a suggestion on how to get round this?

Is it possible to not cache 404 responses with cloudfront?

Here is the simplified Dropzone code if that helps:

$(obj).dropzone({
            maxFilesize: 40, // MB
            acceptedFiles: '.jpg,.jpeg,.png,.bmp,.gif,.pdf',
            success: function(file, response){
                var form = this.element;

                if ( $(response).filter('.js-pdf').length ) {
                    $(form).prev().find('.note-pdf-container').append(response);
                } else {
                    $(form).prev().find('.gallery').html(response);
                }

            }
        });

Any advice welcome.

0 likes
1 reply
ralphmorris's avatar
ralphmorris
OP
Best Answer
Level 7

Figured it out! From the Cloudfront Distribution there is an Error Pages menu item. I clicked that, Created a Custom Error Response for the 404 Not Found and set the TTL to 0.

Please or to participate in this conversation.