Fetch-url-file-3a-2f-2f-2f 🚀

If your goal is to read a local file from a web page, here are correct, modern approaches:

When fetching URL files, keep the following best practices in mind: fetch-url-file-3A-2F-2F-2F

Chrome, Firefox, Safari, and Edge explicitly disable fetch() and XMLHttpRequest to file:/// URIs to prevent malicious scripts from reading your hard drive without permission. If your goal is to read a local

Error message example in Chrome:

Not allowed to load local resource: file:///...

---

Instead of file:///, use http://localhost:8000 and fetch() normally.
Example with Python: Instead of file:/// , use http://localhost:8000 and fetch()

python -m http.server 8000

This is the standard, secure way:

document.getElementById('fileInput').addEventListener('change', (event) => 
  const file = event.target.files[0];
  const reader = new FileReader();
  reader.onload = (e) => console.log(e.target.result);
  reader.readAsText(file);
);