`fetch(this.url, { method: 'HEAD' });` returns -1 for `content-length`

I have a file on cloudflare pages with a size of a bit more than 5.5MB. I normally retrieve the file in chunks, but to do so, I need to know the file size.
The normal way to obtain the file size is is to do a

fetch(this.url, { method: 'HEAD' });

fetch(this.url, { method: 'HEAD' });

fetch(this.url, { method: 'HEAD' });

fetch(this.url, { method: 'HEAD' }); and then retrieve the property

content-length

content-length

content-length

content-length.
Unfortunately this returns

-1

-1

-1

-1.
Here's the kicker, if I open another tab and enter the URL to the file to download it, the next time I try repeat the

fetch

fetch

, the

content-length

content-length

content-length

content-length is correct.
If anyone know what's going on, my page is at https://mnm-guide.pages.dev/free
The data file is https://mnm-guide.pages.dev/madeira.pmtiles
Loading the page will fail to load the map, but if you download the file first, it will succeed.
Any way to fix this problem?

Erisa•9/4/24, 1:06 AM

and then retrieve the property
content-length
content-length
.

whats the code you use to do this?

funmiles.OP•9/4/24, 1:25 AM

Here are the lines:

const reply = await fetch(this.url, { method: 'HEAD' });
console.log('Fetch got a header info for', this.url, 'of', reply);
const clString = reply.headers.get('content-length') || '-1';
size = Number.parseInt(clString);
console.log('Length is', size, 'from', clString);

const reply = await fetch(this.url, { method: 'HEAD' });
console.log('Fetch got a header info for', this.url, 'of', reply);
const clString = reply.headers.get('content-length') || '-1';
size = Number.parseInt(clString);
console.log('Length is', size, 'from', clString);

funmiles.OP•9/4/24, 1:25 AM

You can see the log prints

funmiles.OP•9/4/24, 1:26 AM

@Erisa It works from the development server but not once deployed.

funmiles.OP•9/4/24, 1:27 AM

The file is there and readable, since it can be downloaded and once downloaded, reloading the page reruns the above code and it works.

funmiles.OP•9/4/24, 1:28 AM

So it feels as if maybe the file is compressed on cloudflare and they do not give the size, but once it's been downloaded, it caches the size?

Erisa•9/4/24, 2:20 AM

const clString = reply.headers.get('content-length') || '-1';const clString = reply.headers.get('content-length') || '-1';

this sounds like cloudflare isnt the one returning -1, but rather cloudflare isnt giving any header and you are just defaulting to -1?
cache would make sense - if there wasnt a length from the upstream but then it was put into cache and now it has a length

funmiles.OP•9/4/24, 4:29 AM

@Erisa I saw that after pasting. So it does not return a size at all. Which is still not the desired result. What other way is there to obtain the size of a file without downloading it?

funmiles.OP•9/4/24, 3:46 PM

Stranger behavior still: If I try to fetch a range of the file for the first 1MB, fetch succeeds but the ArrayBuffer has the length of the whole file.

funmiles.OP•9/4/24, 3:49 PM

Asking for a range starting from 1MB down gives the same thing. It looks like until a download is initiated, the headers are totally ignored.

`fetch(this.url, { method: 'HEAD' });` returns -1 for `content-length`

Similar Threads

Similar Threads

Similar Threads