Problems with HTML5 FileReader

Question

I try to run the FileReader function in my project but it only works pas.Mon project works like so I list all files in a directory. It all works. But when I select a file in the list (my files are local), I end up with this error I do not understand:

Uncaught TypeError: Failed to execute 'readAsText' on 'FileReader': The argument is not a Blob.

Here is my code:

GetFileName function (fs) {
     var target = event.target || event.srcElement;

     var childs = target.parentNode.childNodes;
     {for (i = 0; i ++; i <childs.length)
         if (target == childs [i]) break;
     }

     console.log (i); // Index li
     console.log (event.target.innerHTML); // li value

     filename = "~ / Downloads / snippets" + event.target.innerHTML;

var fr = new FileReader ();
fr.onload = function (e) {
     console.log (e.target.result);
};
fr.readAsText (filename);
}

Does anyone have an idea of what does not work?

Thank you in advance for your help!

Answer 1

I think the problem is that your filename variable is set to:

filename = "~ / Downloads / snippets" + event.target.innerHTML;

...which is a String, rather than the object that's expected by the readAsText function on FileReader.

Try something like this instead:

var fileInputElement = document.getElementById("fileInputElement");
fr.readAsText(fileInputElement.files[0]);

Where "fileInputElement" is the ID of the HTML <input> element of type file.

This may not fit exactly with what you're doing, but it's not easy to tell without seeing more of your JavaScript and HTML.