All geek questions in one place

The parameter is not of type 'Blob'

I wrote the code below to display text from a local file using the API files, but when I click the button, nothing happens and I get the following error when checking an element in the browser, which I am doing wrong

Uncaught TypeError: Failed to execute 'readAsText' in 'FileReader': parameter 1 is not of type 'Blob'.

<!DOCTYPE html> <html> <body> <p>This example uses the addEventListener() method to attach a click event to a button.</p> <button id="myBtn">Try it</button> <pre id="file"></pre> <script> document.getElementById("myBtn").addEventListener("click", function(){ var file = "test.txt" var reader = new FileReader(); document.getElementById('file').innerText = reader.result; reader.readAsText(file); }); </script> </body> </html>
+5
source share
3 answers

To set the contents of a file to innerHtml , you must first read the file. The loadend event loadend triggered only when the file is fully read, and you can access its correction without errors:

 var reader = new FileReader(); var fileToRead = document.querySelector('input').files[0]; // attach event, that will be fired, when read is end reader.addEventListener("loadend", function() { // reader.result contains the contents of blob as a typed array // we insert content of file in DOM here document.getElementById('file').innerText = reader.result; }); // start reading a loaded file reader.readAsText(fileToRead);

You can read more here - and here

0
source

You made a couple of mistakes.

The one that causes the error message is that you are trying to select a file using a string encoded string. You cannot determine which file is loading . An API file allows you to read files that the user selects by entering a file.

Secondly, you are trying to read the result property for reading before you read the file. This requires an event handler (since reading a file, such as Ajax, is asynchronous).

 document.getElementById("myBtn").addEventListener("click", function() { var reader = new FileReader(); reader.addEventListener('load', function() { document.getElementById('file').innerText = this.result; }); reader.readAsText(document.querySelector('input').files[0]); }); 
 <input type="file"> <button id="myBtn">Try it</button> <pre id="file"></pre>
+9
source

As others said, I noticed that the onload event is missing.

So, I have several different ways to show how to get the reader to do something, one to execute readAsText and one to receive data as a base64 byte string using readAsDataURL , which is better in mine since you don’t have to worry about Unicode and other strange question mark characters. To see them in action, simply flip the call in the listener between uploadFile(); and uploadFile1(); . And I show a few different ways to capture a file object:

 document.getElementById("myBtn").addEventListener("click", function() { uploadFile1(); }); function uploadFile1(){ var f = myInput.files[0]; var reader = new FileReader(); reader.onload = processFile(f); reader.readAsText(f); } function uploadFile(){ var f = document.querySelector('input').files[0]; var reader = new FileReader(); reader.onload = processFile(f); reader.readAsDataURL(f); } function processFile(theFile){ return function(e) { // Use the .split I've included when calling this from uploadFile() var theBytes = e.target.result; //.split('base64,')[1]; document.getElementById('file').innerText = theBytes; } } 
 <input id="myInput" type="file"> <button id="myBtn">Try it</button> <span id="file"></span>

And usually I would think you should just do:

 <input type="button" onclick="uploadFile()" id="myBtn">Try it</button>

instead of adding this listener, but for some reason it did not work in JSFiddle.

https://jsfiddle.net/navyjax2/heLmxegn/1/

0
source

Source: https://habr.com/ru/post/1236839/

More articles:


All Articles