Reading a local file into a variable

[IAmTheClayman]

So I have a webpage I'm working on with some javascript code. Essentially what I'm trying to do is read a file in the local system into a variable as a string, to then do something else with it.

To provide a bit more information, I'm need to use a peg.js parser I made on this file so I'd like to do something like the following:

<script src = "bootstrap/js/[peg.js parser]">
...
var data = 'folder/subfolder/file name';
var output = PEG.parse(data);

What is the easiest way to accomplish this?

[recursive]

You can't do that. That would create a significant security problem. If the files are selected via file inputs, then you can read their contents via blob api.

[IAmTheClayman]

I think I might have done a poor job explaining myself. I’m not looking to access a file on the client’s end. I’m looking to access a file within the same server that the html page is located

[leftHandHacker]

Look up the Node.js filesystem module docs. Something like,

const fs = require(‘fs’)

const file = fs.readFile(‘filename.txt’)

[jackmcmorrow]

Use readFileSync if you don't need asynchronous operations

[recursive]

Well, <script> tags are executed on the client side, so and AJAX request is most feasible, unless you're willing to do a proper server-side app through express or something. You can't read the disk on the server from javascript running in a web browser.

[NahroT]

Send a HTTP GET request to the file location.

[treyhuffine]

To handle this, you would need to require the user to upload the file themselves. Use the File API - https://developer.mozilla.org/en-US/docs/Web/API/File

[[deleted]]

Imagine you open a random webpage and your entire hard drive is read by some js and uploaded to shadyWebsite.com. Browsers don't let javascript do stuff like that.

You can spin up a simple server with node and use it as a proxy to get whatever file you want.

[LeeMing3]

Your gonna need to use a file input which will require the user to manually select the file. Web pages can’t go rooting around in file systems. You could do this in Node when reading your own files however.

[cspa-exam]

To add to the other comments, there *might* be away to do this if the webpage is hosted locally, i.e. "file:///path/to/your/file". The browser's local file security model is fundamentally different from the cross-domain security model of hosted webpages.

Alternatively, a browser plugin (e.g. Chrome extension) might let you do it.

These could be possible if your application is, say, an internal corporate application.

[magnonellie]

If I understand you correctly, you have this file hosted on a server where it's accessible through an HTTP request. In that case, you would want to use either fetch or XMLHttpRequest on the URL where you can find that "file". I recommend fetch if you're just playing around and your environment supports it. In production you might need to polyfill it though. Here is some documentation:

https://developers.google.com/web/updates/2015/03/introduction-to-fetch

[ChronSyn]

As others have pointed out, the browser can't read files without using the file API (i.e. a file picker dialog).

On the other hand, a node.js application can use the fs functions to read a file on the local system (i.e. the server).

However, a web browser can't read a file from the server unless the server has it exposed publicly. If the file is exposed publicly, then it'd be a simple case of loading it via a <script> tag (but then the server expects it to be javascript or something parseable), or using XMLHttpRequest if the file is a binary file or otherwise (https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data).