Javascript FileReader onload not firing

Question

I haven't used JavaScript in a while and I can't seem to read a text file and display the contents.

I've tried onload as well as onloadend. If I just put reader.onload = alert('Hello'); the alert fires, but I can't get anything to work with the function.

Not exactly sure where to go from here. I've tried defining the function after reader.onload = function(evt)... but that doesn't work.

I've tried in Safari 6.0.5 and Chrome as well.

<!DOCTYPE HTML>                                                                    
<html>                                                                             
<head>                                                                         
    <title>Pi to Colors</title>                                                
</head>                                                                        
<body>                                                                         
<script>                                                                       
function readFile() {                                                       
    var reader = new FileReader();                                             
    reader.onload = readSuccess;                                            
    function readSuccess(evt) {                                             
        var field = document.getElementById('main');                        
        field.innerHTML = evt.target.result;                                
    };                                                                      
    reader.readAsText("/pi.txt");                                              
}                                                                           
</script>                                                                      
<div id="main">                                                                

</div>                                                                         
</body>                                                                        
</html>

So you're running this code in a browser? Trying to read a local file off your system? I'm pretty sure the browser prevents you from doing that. What does your browser console tell you? — Greg Hewgill
– Greg Hewgill, Commented Aug 30, 2013 at 23:35

Gilad Green · Accepted Answer · 2016-08-10 05:51:43Z

25

You can't grab a local file like that for security reasons.

Another underlying problem is that readAsText (and all the read functions) need the file's content and not its file path/name. You can grab this from the files collection of the input type="file" element. Here is how your code could work:

function readFile(file) {                                                       
    var reader = new FileReader();
    reader.onload = readSuccess;                                            
    function readSuccess(evt) { 
        var field = document.getElementById('main');                        
        field.innerHTML = evt.target.result;                                
    };
    reader.readAsText(file);                                              
} 

document.getElementById('selectedFile').onchange = function(e) {
    readFile(e.srcElement.files[0]);
};

Here is the jsfiddle: http://jsfiddle.net/fstreamz/ngXBV/1/

Note: this code not work in safari browser

edited Aug 10, 2016 at 5:51

Gilad Green

37.3k7 gold badges67 silver badges99 bronze badges

answered Aug 31, 2013 at 3:07

LUKE

1,36511 silver badges9 bronze badges

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

3 Comments

user2740169 Over a year ago

"reader.onload = readSuccess;" Shouldn't 'readSuccess' be 'readSuccess()'?

user447356 Over a year ago

No, it would assign "undefined" which is the return value of the function.

Nate Anderson Over a year ago

My variation on this jsfiddle demonstrates my problem, you can't use addEventListener('onload', readSuccess), despite the Mozilla documentation : "Note: As FileReader inherits from EventTarget, all those events can also be listened for by using the addEventListener method."

Ahmad Anas · Accepted Answer · 2013-08-31 04:49:59Z

1

you can use ajax to get the content of your file:

var reader= new XMLHttpRequest();
reader.open('GET', '/pi.txt');
reader.onreadystatechange =readSuccess();
function readSuccess(evt) {                                             
   var field = document.getElementById('main');                        
   field.innerHTML = reader.responseText;                                
};
reader.send();

answered Aug 31, 2013 at 4:49

Ahmad Anas

1138 bronze badges

Comments

Natalie Hedström · Accepted Answer · 2016-01-08 09:59:02Z

0

I have the same the problem and I found a solution. You can't read the local file unless the user has permission. You can put a <input type="file"> on your page. When the file input change, you can read the data.

edited Jan 8, 2016 at 9:59

Natalie Hedström

2,6293 gold badges27 silver badges38 bronze badges

answered Jan 8, 2016 at 9:34

simon.Du

111 bronze badge

Comments

riopiedra · Accepted Answer · 2015-09-29 05:55:52Z

Nothing worked for me. Below you can find my ugly solution, but it was the only one that did the job. In my case the user can upload up to 3 files, so the var iPDF can be 0,1,2.

	var iPDF=UpdatedExistingNumberOfPDFfiles;
	if (iPDF < NoMaxPDFfiles) {
		var reader = new FileReader();
		reader.readAsDataURL(files[iPDF-UpdatedExistingNumberOfPDFfiles]);
		reader.onload = function (){
		var PDFdataURL = reader.result;
		var xhr = new XMLHttpRequest();
		xhr.open("POST", "Observation_PDFUpload.php",true);
		xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		var NumberOfPDFfile = iPDF+1;
		xhr.send("PDFfileURL="+PDFdataURL+"&PDFfileName="+PDFfileName+"-Annex-"+NumberOfPDFfile);
		iPDF++;
		if (iPDF < NoMaxPDFfiles) {
			reader.readAsDataURL(files[iPDF-UpdatedExistingNumberOfPDFfiles]);
			reader.onload = function (){
			PDFdataURL = reader.result;
			var xhr1 = new XMLHttpRequest();
			xhr1.open("POST", "Observation_PDFUpload.php",true);
			xhr1.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			NumberOfPDFfile = iPDF+1;
			xhr1.send("PDFfileURL="+PDFdataURL+"&PDFfileName="+PDFfileName+"-Annex-"+NumberOfPDFfile);
			iPDF++;	
			if (iPDF < NoMaxPDFfiles) {
			reader.readAsDataURL(files[iPDF-UpdatedExistingNumberOfPDFfiles]);
			reader.onload = function (){
			PDFdataURL = reader.result;
			var xhr2 = new XMLHttpRequest();
			xhr2.open("POST", "Observation_PDFUpload.php",true);
			xhr2.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			NumberOfPDFfile = iPDF+1;
			xhr2.send("PDFfileURL="+PDFdataURL+"&PDFfileName="+PDFfileName+"-Annex-"+NumberOfPDFfile);
			}	
			}			
		
			}
		}
		}
		};

Collectives™ on Stack Overflow

Javascript FileReader onload not firing

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related