215

I tried to open file with

window.open("file:///D:/Hello.txt");

The browser does not allow opening a local file this way, probably for security reasons. I want to use the file's data in the client side. How can I read local file in JavaScript?

0

11 Answers 11

310

Here's an example using FileReader:

function readSingleFile(e) {
  var file = e.target.files[0];
  if (!file) {
    return;
  }
  var reader = new FileReader();
  reader.onload = function(e) {
    var contents = e.target.result;
    displayContents(contents);
  };
  reader.readAsText(file);
}

function displayContents(contents) {
  var element = document.getElementById('file-content');
  element.textContent = contents;
}

document.getElementById('file-input')
  .addEventListener('change', readSingleFile, false);
<input type="file" id="file-input" />
<h3>Contents of the file:</h3>
<pre id="file-content"></pre>


Specs

http://dev.w3.org/2006/webapi/FileAPI/

Browser compatibility

  • IE 10+
  • Firefox 3.6+
  • Chrome 13+
  • Safari 6.1+

http://caniuse.com/#feat=fileapi

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

10 Comments

Just one sec, when I reload the same last file, the content doesn't change (I say about its content, when I edit the file text). Can you help?
@SamusHands Yeah, you're right, I can reproduce the problem in Safari and Chrome (it works fine in Firefox). Setting the value of the input to null on each onClick event should do the trick, see: stackoverflow.com/a/12102992/63011
This is good as an example of FileReader, but a comment on the displayContents above: note that setting innerHTML like this with untrusted content can be a security vulnerability. (To see this for yourself, create a bad.txt containing something like <img src="/nonexistent" onerror="alert(1);"> and see that the alert gets executed—it could be more malicious code.)
@ShreevatsaR really good point. My snippet is just an example, but you're right, it shouldn't promote bad security habits. I replaced innerHTML with textContent. Thanks for your comment.
@TeylerHalama You can also use the DOMContentLoaded event for that.
|
72

The HTML5 fileReader facility does allow you to process local files, but these MUST be selected by the user, you cannot go rooting about the users disk looking for files.

I currently use this with development versions of Chrome (6.x). I don't know what other browsers support it.

3 Comments

Right, it's now possible with HTML5. Look here
A quick scan of the referenced spec (last updated 2012-07-12) shows no facilities for file writing, only reading.
@Flavien Volken no, its impossible. Local files MUST be selected by the user
64

Because I have no life and I want those 4 reputation points so I can show my love to (upvote answers by) people who are actually good at coding I've shared my adaptation of Paolo Moretti's code. Just use openFile(function to be executed with file contents as first parameter).

function dispFile(contents) {
  document.getElementById('contents').innerHTML=contents
}
function clickElem(elem) {
	// Thx user1601638 on Stack Overflow (6/6/2018 - https://stackoverflow.com/questions/13405129/javascript-create-and-save-file )
	var eventMouse = document.createEvent("MouseEvents")
	eventMouse.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
	elem.dispatchEvent(eventMouse)
}
function openFile(func) {
	readFile = function(e) {
		var file = e.target.files[0];
		if (!file) {
			return;
		}
		var reader = new FileReader();
		reader.onload = function(e) {
			var contents = e.target.result;
			fileInput.func(contents)
			document.body.removeChild(fileInput)
		}
		reader.readAsText(file)
	}
	fileInput = document.createElement("input")
	fileInput.type='file'
	fileInput.style.display='none'
	fileInput.onchange=readFile
	fileInput.func=func
	document.body.appendChild(fileInput)
	clickElem(fileInput)
}
Click the button then choose a file to see its contents displayed below.
<button onclick="openFile(dispFile)">Open a file</button>
<pre id="contents"></pre>

2 Comments

Thanks, was helpful. Though note that instead of that code you have in clickElem(), you can instead just call fileInput.click(). (at least in the latest version of Chrome)
Works for me, code on which it's based doesn't.
15

Try

function readFile(file) {
  return new Promise((resolve, reject) => {
    let fr = new FileReader();
    fr.onload = x=> resolve(fr.result);
    fr.readAsText(file);
})}

but user need to take action to choose file

function readFile(file) {
  return new Promise((resolve, reject) => {
    let fr = new FileReader();
    fr.onload = x=> resolve(fr.result);
    fr.readAsText(file);
})}

async function read(input) {
  msg.innerText = await readFile(input.files[0]);
}
<input type="file" onchange="read(this)"/>
<h3>Content:</h3><pre id="msg"></pre>

3 Comments

I just saw msg.innerText and for the first time I learned that some elements identified with IDs can be accessed using IDs as variable names or properties of the window object.
so the answer is we can't. html seems so perfect for documents interaction ! but not everything can be served. A local file access would have been nice
@yota - browser force user to interact (and be aware) probably because of security reasons
15

Others here have given quite elaborate code for this. Perhaps more elaborate code was needed at that time, I don't know. Anyway, I upvoted one of them, but here is a very much simplified version that works the same:

function openFile() {
  document.getElementById('inp').click();
}
function readFile(e) {
  var file = e.target.files[0];
  if (!file) return;
  var reader = new FileReader();
  reader.onload = function(e) {
    document.getElementById('contents').innerHTML = e.target.result;
  }
  reader.readAsText(file)
}
Click the button then choose a file to see its contents displayed below.
<button onclick="openFile()">Open a file</button>
<input id="inp" type='file' style="visibility:hidden;" onchange="readFile(event)" />
<pre id="contents"></pre>

Comments

6

Consider reformatting your file into javascript. Then you can simply load it using good old...

<script src="thefileIwantToLoad.js" defer></script>

1 Comment

In this case, you could format the file as a base64 string to save it in a JavaScript file.
1

It is not related to "security reasons" . And it does not matter if it local or file on network drive. The solution for Windows OS could be IIS - Internet Information Services and this is some details :
To open file in browser with Java Script window.open() , the file should be available on WEB server.
By creating Virtual Directory on your IIS that mapped to any physical drive you should be able to open files. The virtual directory will have some http: address. So instead of window.open("file:///D:/Hello.txt");
You will write window.open("http://iis-server/MY_VIRTUAL_DRIVE_D/Hello.txt");

Comments

0

Here is how to do it in typescript if Blob is good enough (no need to convert to ByteArray/String via FileReader for many use-cases)

function readFile({
  fileInput,
}: {
  fileInput: HTMLInputElement;
}): Promise<ArrayLike<Blob>> {
  return new Promise((resolve, reject) => {
    fileInput.addEventListener("change", () => {
      resolve(fileInput.files);
    });
  });
}

here is how to do it in vanilla javascript

function readFile({
  fileInput,
}) {
  return new Promise((resolve, reject) => {
    fileInput.addEventListener("change", () => {
      resolve(fileInput.files);
    });
  });
}

Comments

-3

The xmlhttp request method is not valid for the files on local disk because the browser security does not allow us to do so.But we can override the browser security by creating a shortcut->right click->properties In target "... browser location path.exe" append --allow-file-access-from-files.This is tested on chrome,however care should be taken that all browser windows should be closed and the code should be run from the browser opened via this shortcut.

Comments

-7

You can't. New browsers like Firefox, Safari etc. block the 'file' protocol. It will only work on old browsers.

You'll have to upload the files you want.

1 Comment

Why is this downvoted so much ? Does that mean that when I visit website, it can read all my private files ?
-9

Javascript cannot typically access local files in new browsers but the XMLHttpRequest object can be used to read files. So it is actually Ajax (and not Javascript) which is reading the file.

If you want to read the file abc.txt, you can write the code as:

var txt = '';
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
  if(xmlhttp.status == 200 && xmlhttp.readyState == 4){
    txt = xmlhttp.responseText;
  }
};
xmlhttp.open("GET","abc.txt",true);
xmlhttp.send();

Now txt contains the contents of the file abc.txt.

4 Comments

@TheMuffinMan and XML.(Asynchronus Javascript and XML)
This answer is not relevant as the op asked for how to open files that reside on the client side, not files that reside on the server.
@ThomasNguyen, this question is the first google result of "javascript open file" and this answer beneficial nonetheless.
@ThomasNguyen I agree, but a possible workaround without FileReader could be to upload the file to the server and read it from there. Still I downvoted this answer.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.