Converting File input to text in JavaScript

Question

I'm programming a simple JavaScript page to get a file from the user and convert it to a data variable of either binary or text. When I use my code in a click event handler of a button, I get this error:

Uncaught TypeError: file.getAsText is not a function at HTMLButtonElement.sendfButton.onclick

First I browse and select a file, then click on send button.

This is my html input and button:

            <tr>
            <td>
                <button type="button" class="control-button" id="send-file-button">SEND-FILE</button> 
            </td>
            <td>
                    <input type='file' id='myfileinput' multiple><br>
                    <div id='output'>


            </td>
        </tr>

Here are my variables:

                var sendfButton = document.getElementById("send-file-button");
            var fileInput = document.getElementById("myfileinput");

And here is my click event handler:

sendfButton.onclick = function ()
                {
                var files = fileInput.files;
                var accept = {
                binary : ["image/png", "image/jpeg"],
                text   : ["text/plain", "text/css", "application/xml", "text/html" , "text/txt"]
                };
                var file;
                    if (conn && conn.open)
                    {
                        console.log('in1');
                         //convert a file to bytes then send it
                        for (var i = 0; i < files.length; i++)
                        {
                            console.log('in2');
                            file = files[i];
                            // if file type could be detected
                            if (file !== null) 
                            {
                                console.log('in3');
                                if (accept.binary.indexOf(file.type) > -1) 
                                {
                                    console.log('in binary');
                                    // file is a binary, which we accept
                                    var data = file.getAsBinary();
                                    console.log(data + 'dtat');
                                } 
                                else if (accept.text.indexOf(file.type) > -1) 
                                {
                                    console.log('in text');
                                // file is of type text, which we accept
                                var data = file.getAsText();
                                console.log(data + 'dqata');
                                // modify data with string methods
                                }
                            }
                        }

                        console.log('out' + data);
                        conn.send(data);
                        console.log("fSent: " + data);
                        addMessage("<span class=\"selfMsg\">Self: </span> " + data);
                    }
                    else
                    {
                        console.log("failed fsend");
                    } 
                }

It seems to work when I run the code directly, but not when it is activated inside of the button event handler. Code 2 i add filereader but still there is a bug :

sendfButton.onclick = function ()
                {
                var files = fileInput.files;
                var accept = {
                binary : ["image/png", "image/jpeg"],
                text   : ["text/plain", "text/css", "application/xml", "text/html" , "text/txt"]
                };
                var file;
                    if (conn && conn.open)
                    {
                        console.log('in1');
                         //convert a file to bytes then send it
                        for (var i = 0; i < files.length; i++)
                        {
                            console.log('in2');
                            file = files[i];
                            var readers = new FileReader();
                            // if file type could be detected
                            if (file !== null) 
                            {
                                console.log('in3');
                                if (accept.binary.indexOf(file.type) > -1) 
                                {
                                    console.log('in binary');
                                    // file is a binary, which we accept
                                    var data = readers.readAsBinaryString(file);
                                    console.log(data + 'dtat');
                                } 
                                else if (accept.text.indexOf(file.type) > -1) 
                                {
                                    console.log('in text');
                                // file is of type text, which we accept
                                var data = readers.readAsText(file);
                                console.log(data + 'dqata');
                                // modify data with string methods
                                }
                            }
                        }

                        console.log('out' + data);
                        conn.send(data);
                        console.log("fSent: " + data);
                        addMessage("<span class=\"selfMsg\">Self: </span> " + data);
                    }
                    else
                    {
                        console.log("failed fsend");
                    } 
                }

it returns undefined

Please see the How to Ask page. Please include details like at least where the error is actually triggered. Otherwise we have to guess. — Dave Newton
– Dave Newton, Commented Mar 4, 2020 at 18:48
file is just a handle to a file, not an actual file. You need to use a fileReader to read the file that file is associated with. developer.mozilla.org/en-US/docs/Web/API/FileReader — JDunken
– JDunken, Commented Mar 4, 2020 at 18:51
i approved my code with adding filereader but there is a bug it returns undefined i edited my question so you can see my second code. — Compo Start_up
– Compo Start_up, Commented Mar 4, 2020 at 19:19

Boric · Accepted Answer · 2020-03-04 19:45:41Z

8

The File.getAsText() method is obsolete. The File object is a specific kind of a Blob, so you can use the Blob.text() method instead. Replace file.getAsText() in your code with await file.text().

Edit: Another option that has better browser support is to use FileReader.readAsText(). Your code would look something like this:

var button = document.getElementById("send-file-button");
var fileInput = document.getElementById("myfileinput");
var output = document.getElementById("output");

button.onclick = function () {
  var files = fileInput.files;
  var reader = new FileReader();
  reader.onload = function () {
    output.innerText = reader.result;
  };
  if(files[0]) {
    // This does not return the text. It just starts reading.
    // The onload handler is triggered when it is done and the result is available.
    reader.readAsText(files[0]);
  }
};

<input type='file' id='myfileinput' multiple>
<button type="button" class="control-button" id="send-file-button">SUBMIT-FILE</button> 
<div id='output'>

edited Mar 4, 2020 at 19:45

answered Mar 4, 2020 at 18:54

Boric

8728 silver badges27 bronze badges

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

7 Comments

Compo Start_up Over a year ago

no change i got this instead Uncaught TypeError: file.Text is not a function at HTMLButtonElement.sendfButton.onclick

Boric Over a year ago

text() needs to be lower case.

Boric Over a year ago

You can also try using FileReader.readAsText() as decribed here: developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsText

Compo Start_up Over a year ago

i approve my code with adding filereader but there is a bug it returns undefined i edited my question so you can see my second code.

Boric Over a year ago

The readAsText method does not return the text. It just starts reading. The onload method of the reader is an event handler that is triggered when the reader is finished and the result property of the reader is available. I updated my answer to demonstrate this.

|

Dotista · Accepted Answer · 2023-08-10 09:43:45Z

0

Alternative for a different string result, but here your can send it to your backend rest. file variable is from the File api.

var reader = new FileReader();
  reader.onload = function () {
    // send console result to your backend
    console.log(reader.result.split(',')[1]);
  };
  if(file) {
    reader.readAsDataURL(file);
  }

answered Aug 10, 2023 at 9:43

Dotista

4514 silver badges13 bronze badges

Collectives™ on Stack Overflow

Converting File input to text in JavaScript

2 Answers 2

7 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Related