Skip to main content
getflourish
November 24, 2023
Solved

Allow "head" requests for /image to get file size before downloading the image

  • November 24, 2023
  • 8 replies
  • 1573 views

Knowing the file size before fetching the content can drastically improve the user experience and save bandwidth.

Image urls returned from the /api/image endpoint don’t allow HEAD requests.

As described on MDN, the HTTP HEAD Method can be used to do that. It will return the content-length:

MDN Web Docs

Unfortunately the images served from S3 only allow GET requests.

Feature request
Allow HEAD requests on the S3 image URLs

Reproduction:

This topic has been closed for replies.
Best answer by jefflee

Thanks for clarifying. I think either of your suggestions (allowing S3 HEAD requests and supplementing the /v1/images response) might be possible. We’ll log your request, it’s a good one!

8 replies

getflourishAuthor
November 24, 2023

Another solution would be to provide the file size with the /api/image response, but this would change the output format and might not be desirable 🙂

Florian_Schulz
Florian_Schulz
November 30, 2023

Bumping this topic. 🙂

jefflee
Figmate
jefflee
Figmate
November 30, 2023

To clarify, are you referring to the REST API image endpoint, or something else?

getflourishAuthor
November 30, 2023

I’m referring to the actual image urls returned by the /image endpoint.

I want to know the file size of the image behind the url, before downloading it.

Instead of making a GET request which would download the actual image, I want to make a HEAD request to get the content-length.

This works if I make the request through PHP or Node, but my app is running in the browser and Figma’s image urls won’t allow these kind of HEAD requests from a browser.

jefflee
Figmate
jefflee
Figmate
November 30, 2023

Can I confirm that this is the problem you’re encountering?

  • You’re using the GET /v1/images REST API call
  • You’re attempting to make a HEAD request from a browser request against one of the S3-hosted image URLs that are returned from the REST API call, and are running into a cross-origin error
getflourishAuthor
December 1, 2023

Yes, exactly.

Here’s the console.log() for the same code that is making HEAD requests for:

  1. Image URL from Figma → CORS
  2. Image URL from Unsplash ✅

image

I wonder wether “HEAD” is not included in the “AllowedMethods” field of the CORS configuration of the S3 bucket? 🤷

jefflee
Figmate
jeffleeAnswer
Figmate
December 1, 2023

Thanks for clarifying. I think either of your suggestions (allowing S3 HEAD requests and supplementing the /v1/images response) might be possible. We’ll log your request, it’s a good one!

    getflourishAuthor
    December 4, 2023

    Great, thanks for listening!

    Terms & ConditionsAccessibility statement