2

Working in Chrome, loading a local html or JS file.

I found many examples of how to load a file that is selected using the Choose File input.

However, didn't figure out how to do it given a file name without using the Choose File input.

The Choose File input returns a File object.

How to create the File object without the Choose File input?

From the File API:

new File(
  Array parts,
  String filename, 
  BlobPropertyBag properties
);

But didn't figure out what the parts and properties would be.

Edit: Use case:

I have code coverage results generated as part of a test suite. It is stored as JSON (which is easy to read), but I need to display it with the source code.

So the feature is to load the source code and JSON data, and render them together on a web page using HTML and Javascript.

The file would be opened from the browser and lives on the local machine. There is no server.

Improve this question
14
  • Maybe you need the XMLHttpRequest? It is a tool for loading any files over HTTP protocol. Commented May 24, 2016 at 22:37
  • As I stated in the question, this is not for an HTTP request. This is for reading a local file without a server. Commented May 24, 2016 at 22:38
  • 1
    If you "thing" is opened in a browser, it is a webpage. And if somebody "uses" your "thing", which is a webpage, he is a visitor. Commented May 24, 2016 at 22:49
  • 3
    Apparently the real problem is a secret. I guess the answer will have to be a secret then too. Commented May 24, 2016 at 22:50
  • 1
    If the file is small, you can save it and open it using localStorage, without users permission. Otherwise, just start a local HTTP server (there is a Chrome extension for that) and use XMLHttpRequest. Once, I used JS to process a 22 GB file. Commented May 24, 2016 at 23:54

3 Answers 3

Reset to default
7

The browser cannot load arbitrary files by name from your filesystem without special extensions or other shenanigans. This is a security policy to prevent random web sites from reading files from your hard disk as you browse the internet.

If you're down to do something special like if you want to write a chrome app, you could get access to some nice APIs for accessing the filesystem: https://developer.chrome.com/apps/fileSystem

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Although I have seen this before, it does not make much sense because: 1. You can load any local file using the Choose File input. 2. HTML files loaded from the local filesystem typically have different permissions than those served by remote hosts.
@BSeven Sure, you can load any file, but only after the user selects it. That's what gives it security.
4

The File constructor doesn't read a file from the harddrive, but rater make a virtual file, consider this:

var file = new File(["some", "content"], "/tmp/my-name.txt");
var reader = new FileReader();
reader.onload = function() {
  console.log(reader.result); // somecontent
};

No file will be read or stored on the clients machine.

If you are talking about creating files in then you should take a look at fs.

Improve this answer

2 Comments

I don't think it's node.js, because the question started with "Working in Chrome"
@4castle valid point. I just mentioned it in case OP got v8 and google-chrome mixed up.
0

For security reasons all browsers don't support predefined values on file fields so the answer is you can't.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.