hisoka Posted July 16, 2018 Share Posted July 16, 2018 Starting to learn about filereader , I saw this concept : https://developer.mozilla.org/en-US/docs/Web/API/FileReader/onload I do not understand what does this mean : The load event is fired when a resource and its dependent resources have finished loading. what is load ? what is a resource ? in an easy way I am really confused Link to comment Share on other sites More sharing options...
justsomeguy Posted July 16, 2018 Share Posted July 16, 2018 The resource is the file to open. Loaded means it has been read. 1 Link to comment Share on other sites More sharing options...
hisoka Posted July 19, 2018 Author Share Posted July 19, 2018 (edited) I have really a very hard time trying to understand these concepts : The FileReader.onload property contains an event handler executed when the load event is fired, when content read with readAsArrayBuffer, readAsBinaryString, readAsDataURL or readAsText is available. thanks to your previous answer Justsomeguy , I understood very well what is a resource and what is load . So putting what I understood into practice , all what i can only is that FileReader.onload is an event handler executed when the file content is read . I understand that , for example , clicking on a mouse is an event . However I do not understand what is an event handler ? and why we need onload event handler after reading the file content ? Edited July 19, 2018 by hisoka Link to comment Share on other sites More sharing options...
justsomeguy Posted July 19, 2018 Share Posted July 19, 2018 An event handler is a function that runs when the event happens. You use a load event because the file is read asynchronously, meaning the code does not stop and wait for the file to be read. The code moves on to whatever is next, and the event handler runs when the file is loaded. Link to comment Share on other sites More sharing options...
hisoka Posted July 20, 2018 Author Share Posted July 20, 2018 Quote An event handler is a function that runs when the event happens OK that explains ,very well, what is an event handler . Quote You use a load event because the file is read asynchronously my question was not why we use a load event . My question was why we need onload event handler after reading the file content ? I understand that an event handler is a function executed when an event is triggered . So based on this , an onload event handler is a javascript function which is executed after the file is read . Again based on this I asked , why we need onload event handler after reading the file content? in other words , why we need a function to be executed after the file is read ? and what this function that should be executed after the file is read to begin with ? Link to comment Share on other sites More sharing options...
justsomeguy Posted July 20, 2018 Share Posted July 20, 2018 in other words , why we need a function to be executed after the file is read ? Because, like I said, the file is read asynchronously. The browser does not pause execution until the file is read, the code does not stop. It executes the next line of code immediately after you tell it to open the file, it does not wait for the file to be opened and read. So, if the browser isn't going to wait for that to happen, then how do you get the contents of the file? With a load handler. and what this function that should be executed after the file is read to begin with ? You write the function to do whatever you want to do with the contents of the file. Link to comment Share on other sites More sharing options...
hisoka Posted July 20, 2018 Author Share Posted July 20, 2018 Quote So, if the browser isn't going to wait for that to happen, then how do you get the contents of the file? With a load handler. So that implies that without the load event handler , the browser will block the reading of the file until it executes its own instructions and therefore the whole procedure will be synchronous ? Quote You write the function to do whatever you want to do with the contents of the file. what if I want only to read a file ? do I need , though , a load event handler ? Link to comment Share on other sites More sharing options...
justsomeguy Posted July 20, 2018 Share Posted July 20, 2018 I don't know if you have an option to make the file read synchronous. You can make an ajax request synchronous, I don't know about file reads. If you did that the browser would freeze until that operation finished. what if I want only to read a file ? do I need , though , a load event handler ? If you only want to read a file for the purpose of accessing the file, or just for fun, you don't need a load handler. If you want to actually do any work with the actual data in the file then you get that data in the load handler, it is not available before the load event. I mean, you can do this: var file = event.target.files[0]; var reader = new FileReader(); reader.readAsText(file); That will read the contents of the file, and it doesn't require a load handler. But your code has no access to the contents of the file. 1 Link to comment Share on other sites More sharing options...
hisoka Posted July 24, 2018 Author Share Posted July 24, 2018 1) I do not understand what is this : var file = event.target.files[0]; could you please explain it and what it does ? 2) reading a file means opening it only ? 3) So if I want to print the content of a file in the console log of my browser then I , necessarily , need a load event handler ? best regards Link to comment Share on other sites More sharing options...
justsomeguy Posted July 24, 2018 Share Posted July 24, 2018 It came from the documentation in your first post. reading a file means opening it only ? No, it means getting the data in it. So if I want to print the content of a file in the console log of my browser then I , necessarily , need a load event handler ? Practically, yes. It would probably be possible to do it other ways, but there's no reason to do it another way. Link to comment Share on other sites More sharing options...
hisoka Posted July 25, 2018 Author Share Posted July 25, 2018 (edited) Yes but I do not understand what it means : var file = event.target.files[0]; and this var file = event.target.files what is the meaning of them ? Quote No, it means getting the data in it. ok what do you mean by getting the data in it ? you mean , literary , reading the file line by line ? Edited July 25, 2018 by hisoka Link to comment Share on other sites More sharing options...
justsomeguy Posted July 25, 2018 Share Posted July 25, 2018 If you look at the example code in the page you linked to, that is inside an event handler for a change event on a file input field. So event.target is the file input. File inputs have a files property that contains the files that were selected. ok what do you mean by getting the data in it ? you mean , literary , reading the file line by line ? It's not line by line, it's all of it, but yes. 1 Link to comment Share on other sites More sharing options...
hisoka Posted July 26, 2018 Author Share Posted July 26, 2018 Thanks . So I have a text file in my computer and tried to print its content using console log : var m ; var reader = new FileReader(); reader.onload = function(event) { var contents = event.target.result; }; m = reader.readAsText(C:\m.txt); console.log(m); However I got this error : Exception: SyntaxError: missing ) after argument list . what is the cause of the error and how to correct it ? Link to comment Share on other sites More sharing options...
Ingolme Posted July 26, 2018 Share Posted July 26, 2018 First, you haven't quoted your string, it should be reader.readAsText("C:\m.txt"); The second problem is that the browser is not allowed to read files directly from your filesystem. The third problem is that the readAsText method does not take a file path string as an argument, it takes a File object. You have to get the file object from a file input as shown in the example on this page: https://developer.mozilla.org/en-US/docs/Web/API/FileReader/onload var file = event.target.files[0]; // ... // ... reader.readAsText(file); 1 Link to comment Share on other sites More sharing options...
justsomeguy Posted July 26, 2018 Share Posted July 26, 2018 The fourth problem is that the readAsText method does not return a value. m is undefined. 1 Link to comment Share on other sites More sharing options...
hisoka Posted July 27, 2018 Author Share Posted July 27, 2018 So now I did like this : <html> <script> function onChange(event) { var file = event.target.files[0]; var reader = new FileReader(); reader.onload = function(event) { console.log(event.target.result) }; reader.readAsText(file); } </script> <body> <input type="file" onchange="onChange(event)"> </body> </html> However , it did not print the content of the text file otherwise the name of the text file . Why ? and how to correct it ? Link to comment Share on other sites More sharing options...
justsomeguy Posted July 27, 2018 Share Posted July 27, 2018 Might as well at least make it a valid HTML document: <!doctype html> <html> <body> <script> function onChange(event) { var file = event.target.files[0]; var reader = new FileReader(); reader.onload = function(event) { console.log(event.target.result) }; reader.readAsText(file); } </script> <input type="file" onchange="onChange(event)"> </body> </html> That displays the contents of the selected file in the console. If that exact code is not working for you, I don't know why. Link to comment Share on other sites More sharing options...
hisoka Posted July 30, 2018 Author Share Posted July 30, 2018 You know yourself that the above script will trigger an error when you try to execute it in the web console because of the angle brackets and the same with a scratchpad . Moreover , when I saved the above code in notepad ++ as html then try to run it using Firefox , it does not display the content of the text file but only its name . So what to do ? Link to comment Share on other sites More sharing options...
justsomeguy Posted July 30, 2018 Share Posted July 30, 2018 You know yourself that the above script will trigger an error when you try to execute it in the web console because of the angle brackets I know, that's not Javascript code, it does not go in the console. Save it as an HTML file and open it in a browser. I was not suggesting to paste it in the console or whatever a scratchpad is. Moreover , when I saved the above code in notepad ++ as html then try to run it using Firefox , it does not display the content of the text file but only its name . So what to do ? It works fine for me, so I don't know what the cause of your issue is. I cannot replicate it. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now