Load a file automatically without using a click button

Question

I am new to javascript and want to load the file without having to click on the load file button

I am using the following script and I want the text to be loaded automatically in the text box.

<html>
    <body>
        <table>
            <tr>
                <td>Select a File to Load:</td>
                <td>
                    <input type="file" id="fileToLoad">
                </td>
                <td>
                    <button onclick="loadFileAsText()">Load File</button>
                <td>
            </tr>
            <tr>
                <td colspan="3">
                    <textarea id="inputTextToSave" style="width:512px;height:256px"></textarea>
                </td></tr>
            </tr>
        </table>
    </body>
</html>

<script type='text/javascript'>
function loadFileAsText()
{
    var fileToLoad = document.getElementById("fileToLoad").files[0];
    var fileReader = new FileReader();
    fileReader.onload = function(fileLoadedEvent) 
    {
        var textFromFileLoaded = fileLoadedEvent.target.result;
        document.getElementById("inputTextToSave").value = textFromFileLoaded;
    };
    fileReader.readAsText(fileToLoad, "UTF-8");
}
</script>

Thanks in advance for the help.

score 2 · Accepted Answer · answered Sep 21 '15 at 18:14

Try adding the onchange attribute, this will call functions when changes have been made to that input.

<input type="file" id="fileToLoad" onchange="loadFileAsText()">

Demo

function loadFileAsText(){
var fileToLoad = document.getElementById("fileToLoad").files[0];
var fileReader = new FileReader();
    fileReader.onload = function(fileLoadedEvent){ 
        document.getElementById("inputTextToSave").value = fileLoadedEvent.target.result;
    };
fileReader.readAsText(fileToLoad, "UTF-8");
}

<table><tr>
<td>Select a File to Load:</td>
<td><input type="file" id="fileToLoad" onchange="loadFileAsText()"></td>
                                 <!-- ^^ onchange attribute added ^^ -->
</tr><tr>
<td colspan="2"><textarea id="inputTextToSave" style="width:512px;height:256px"></textarea></td>
</tr></table>

If you have any questions about the above source code please leave a comment below and I will get back to you as soon as possible.

I hope this helps. Happy coding!

Absolutely Great. Thanks a lot... :) – John Smith Sep 21 '15 at 18:28 — John Smith, Sep 21 '15 at 18:28

score 0 · Answer 2 · answered Sep 21 '15 at 17:42

0

You can just call the function on it's own like this:

loadFileAsText();

answered Sep 21 '15 at 17:42

vsvs

1,496
2
10
12

Thanks for the comment. However, I still don't know what to do. Can you modify the code... – John Smith Sep 21 '15 at 17:46
Just add this to your script file `window.onload = loadFileAsText;` – vsvs Sep 21 '15 at 17:51
Thanks. @TurboTech. I am sure something would have to be removed from the code as well.. I am not sure – John Smith Sep 21 '15 at 17:53
Why would you want to run the function once the page has loaded? The input will be empty since the client hasn't selected a file... – NewToJS Sep 21 '15 at 17:54
Not sure what that means @NewToJS . The client has selected a file by choosing the file by pressing "Choose file" button. I am trying to load an existing file, and then modify the file after getting some inputs through 6 radio buttons. Now the code contains a "Load button" for loading the file which I want to eliminate. – John Smith Sep 21 '15 at 17:59
ok i see what you mean. @manju's [fiddle](https://jsfiddle.net/jage0e48/1/) seems to have what your looking for. You can use that as a starting point. – vsvs Sep 21 '15 at 18:11

score 0 · Answer 3 · answered Sep 21 '15 at 17:44

0

You can do it using Javascript events. for ex: you can call like below:

<input type="file" id="fileToLoad" onblur="loadFileAsText()">

answered Sep 21 '15 at 17:44

Manju

79
7

Thanks for the response @Manju. Since I am new to javascript, how would the exact code look like. If you can help... – John Smith Sep 21 '15 at 17:49
I just went through your code, basically you are trying to read file data and display it. however the loadFileAsText() function is not doing that yet. – Manju Sep 21 '15 at 17:56
check the exact code which i put in https://jsfiddle.net/jage0e48/1/ to read file data and display it – Manju Sep 21 '15 at 18:03
Thanks for the understanding. Possibly you can help too. – John Smith Sep 21 '15 at 18:04
you can read more about file operations in http://www.html5rocks.com/en/tutorials/file/dndfiles/ and if the above code worked for you, can you please mark it as answered? – Manju Sep 21 '15 at 18:07
Just went through the post @Manju But the solution you have given still adds another button called "entire file". I want to avoid clicking on a new button entirely. Can't it be like the moment I choose a file it is directly loaded into the text box? – John Smith Sep 21 '15 at 18:10

score 0 · Answer 4 · edited May 23 '17 at 12:06

0

Respond to the document's ready event:

$(document).ready( loadFileAsText );

If you don't want to use jQuery for simple compatibility with multiple browsers, then see this answer: pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it

edited May 23 '17 at 12:06

Community

1
1

answered Sep 21 '15 at 17:45

dsh

11,380
3
27
48

Load a file automatically without using a click button

4 Answers4

Linked

Related