Jump to content
Sign in to follow this  
hisoka

starting to learn , understanding LOAD

Recommended Posts

The resource is the file to open.  Loaded means it has been read.

  • Thanks 1

Share this post


Link to post
Share on other sites

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 by hisoka

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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 ?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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 ?

Share this post


Link to post
Share on other sites

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.

  • Thanks 1

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by hisoka

Share this post


Link to post
Share on other sites

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.

  • Thanks 1

Share this post


Link to post
Share on other sites

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 ?

Share this post


Link to post
Share on other sites

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);

 

  • Thanks 1

Share this post


Link to post
Share on other sites

The fourth problem is that the readAsText method does not return a value.  m is undefined.

  • Thanks 1

Share this post


Link to post
Share on other sites

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 ?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 ? 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×