2

I can't seem to find a way to display the size of a file in JavaScript in a terminal simulator. (I'm very new to JavaScript)

I've tried these:

https://bitexperts.com/Question/Detail/3316/determine-file-size-in-javascript-without-downloading-a-file

Ajax - Get size of file before downloading

My expected results were to get the byte size but nothing happens. I'm not able to show any error messages (if there were any) as I am on my school laptop and they blocked Inspect Element.

The output needs to be displayed on the "terminal" itself and it must be strictly JavaScript.

Thanks!

Edit 1:

These are the "terminal" files to make it easier than making files based on snippets that are the whole source. The commands are located at js/terminal.html. The main area we need to pay attention to is Line 144.

I would post it in snippets but I'd make this question 20x the size it is. It's based on Andrew Barfield's HTML5 Terminal

enthusiasticGeek
  • 49
  • 6
  • 2
    Is this file held on the server? If so then you would need to write some server side logic to retrieve the file size and return that to your JS. – Rory McCrossan May 14 '19 at 19:07
  • 2
    If the server implements https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/HEAD you can use it. You need a better explanation of what you tried and what nothing happens means. – Ruan Mendes May 14 '19 at 19:09
  • Have they blocked the F12 key entirely? If not the network tab will show you the AJAX request and response. – Dave S May 14 '19 at 19:15
  • 1
    Trying to learn web coding without dev tools will really slow you down. You're better off getting back to it when you can test your code – Ruan Mendes May 14 '19 at 19:29

1 Answers1

9

If the server supports HEAD, you can try to use that. However, there's no guarantee that the Content-Length header is returned even if HEAD requests are supported!

Run the below code in a console from stackoverflow and you'll see the size of HTML for their home page without downloading the full page. (Note that StackOverflow no longer provides a content-length header)

fetch('/', {method: 'HEAD'}).then((result) => {
   console.log(result.headers.get("content-length"))
})

https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/HEAD

The HTTP HEAD method requests the headers that are returned if the specified resource would be requested with an HTTP GET method.

Ruan Mendes
  • 90,375
  • 31
  • 153
  • 217
  • i need to be able to find the size of a file, even if its not on the server. for example, say i need to check the size of foo.exe at https://www.example.com/foo.exe, id need a script to find that. also, it needs to be strictly javascript – enthusiasticGeek May 14 '19 at 19:57
  • @enthusiast what? you can get size of file from server if that file does not exist on server. sorry i prob misunderstood something – Sampo Sarrala - codidact.org May 14 '19 at 20:04
  • @enthusiasticGeek ` need to be able to find the size of a file, even if its not on the server.` makes no sense. How could *anyone* know the size of a file that does not exist. – Erik Philips May 14 '19 at 20:34
  • i mean not on the server the website is hosted on. for example, example.com/foo.exe – enthusiasticGeek May 15 '19 at 12:34
  • @enthusiasticGeek Not if the server you're trying to reach doesn't support CORS. You could do so just using curl. From inside a browser, you only access other servers if they allow it through CORS – Ruan Mendes May 15 '19 at 14:22
  • It's annoying for your own safety. What if other sites could make a call to your bank site while you were visiting their site and see your details? That's because all the calls coming from your browser to your bank site will include your current session. – Ruan Mendes May 15 '19 at 17:01
  • Note that you can do it by using a proxy on your own web server; you won't have the CORS restrictions when using a proxy. – Ruan Mendes May 15 '19 at 17:16
  • 1
    There's no guarantee that the Content-Length header is returned even if HEAD requests are supported! Even [the docs](https://httpwg.org/specs/rfc7231.html#HEAD) say that the payload header fields (incl. Content-Length) may be omitted. – phuzi Jun 07 '22 at 15:49