I’m migrating a blog from another CMS to Webflow for a client. All their header images are hosted on AWS, with public links available for all of them. During the import, Webflow lets me map the column with the respective URLs to an Image field (not to a link field, which is important, so we can use them as OpenGraph images) and the preview shows the images correctly. However, once I’ve completed the import, the image fields are empty.
Looking at the response header, I’m seeing a Content-Type of application/octet-stream. It’s likely that Webflow isn’t recognizing that as a valid image, because it could be anything. In the case of a JPEG, Webflow probably expects a content type of image/jpeg.
Here’s where things get ugl(ier).
Amazon S3 apparently identifies and stores the content type for each file on upload, which means you may not be able to change a global setting of “return .jpeg files as image/jpeg”… though I’d look into that possibility first.
That means you either have to change each of the file manually through the AWS management console ( under image properties / Metadata / Content-Type ). Or you have to write some sort of script if you have a lot of images.
How many images are you dealing with here?
Another possibility is to setup a proxy for S3 that fixes those response content types based on the extension. If this is a one-time import, I’d actually probably go that route personally. Or, if the bucket size is reasonable, export the whole thing as a file set, host it somewhere like Netlify and change all of your URLs that way.
Thank you, Michael! Today, I’ll check with the client whether they can change the global settings on S3.
We are talking about a one-time import of about 600 images here, so changing them manually is not a good solution. The proxy route sounds good to me, but I don’t have any idea how to pull it off, as I don’t have any experience with S3 at all. Could you give me a quick explanation or point me to a resource / google search that would enable me to pull it off?
Unfortunately as far as I’m aware S3 stores the mime type setting with the file at load time. Would be nice if it were a global setting, maybe they’ve added something recently.
For the proxy route, I can’t point you to anything, and you would be building something custom. You can likely find some good code examples online. I build these types of solutions regularly for special purposes so drop me a line if you need some dev work done.
If your filenames are consistent, you might also just be able to export your S3 bucket and host your files somewhere like Netlify just for the load.
