We Keep Coding

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

I wrote a function to read HTML from a file and set the innerHTML of a certain div to equal the HTML inside the file, as a kind of save/load system. This used to work fine, however after a browser update I am getting the error seen in the title.
HTML:
<div id="target">
<button onclick="saveDiv()">Save</button>
<button onclick="loadDiv()">Load</button>
<input id="file" type="file" style="hidden">
<input>
</div>
JS:
const div = document.getElementById('target')
function saveDiv() {
var divContent = div.innerHTML.toString();
var ran = (Math.random() + 1).toString(36).substr(2, 8)
var fileName = `${ran}.txt`;
download(fileName, divContent);
}
function download(name, content) {
var e = document.createElement('a');
e.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(content));
e.setAttribute('download', name);
e.style.display = 'none';
document.body.appendChild(e);
e.click();
document.body.removeChild(e);
}
function loadActors() {
document.getElementById('file').click();
var file = document.getElementById('file').files[0];
var r = new FileReader();
r.onload = (function(reader) {
return function() {
var contents = reader.result;
div.innerHTML = contents;
}
})(r);
r.readAsText(file);
}
I think what may be happening is that the FileReader is trying to read the file before the user has selected it, but I'm not exactly sure. Anyone know what may be happening here?
Edit: Seems that if I select the file after the error then click the load button again it runs fine. How would I make it only run after the user has selected the file?

Get file names while displaying and before uploading on server using html and jquery

I am selecting multiple images using html tag 'input file multiple html' as below.
#Html.TextBoxFor(model => model.files, "",
new {#id = "filesToUploadID", #type = "file", #multiple = "multiple" })
<div class="col-md-10" id="selectedFiles"></div>
Then in javascript, I attached 'onchange' event listner to the above tag. When I select multiple images, I get all the attached images to the tag using jquery. But I need image file names as well. While getting image file names, I get only one file name poplulated in my html along with image using jquery.
jquery/ javascript is below
document.addEventListener("DOMContentLoaded", init, false);
function init() {
document.querySelector('#filesToUploadID').addEventListener('change', handleFileSelect, false);
selDiv = document.querySelector("#selectedFiles");
}
function handleFileSelect(e) {
debugger;
NameArray = [];
if (!e.target.files) return;
selDiv.innerHTML = "";
var files = e.target.files;
for (var i = 0; i < files.length; i++) {
var f = files[i];
NameArray.push(f.name);
var reader = new FileReader();
reader.onload = function (e) {
var html = "<img src='" + e.target.result + "' />";// + "<div>" + + "</div>";//+ "<br clear=\"left\"/>";
$(selDiv).append($(html));
//selDiv.innerHTML += html;
}
reader.readAsDataURL(f);
}
}
I tool help from this link and implemented both ways but could not succeed.
All images names are relevant to the images. What I am getting is like this
It's source code is
I have to assign id's based on image names that's why it is important to get relevant image names. Any lead to the topic will be high appreciated.
Thank you.

var f = files[i];
var fileName = e.target.f.name

Display a waiting gif during a javascript function

I write a script to get a text file, to modify this texter file and then I import the file in our software.
The problem is that the import of the file is very slow (just this part of the script could take more than 1 minute sometime).
I would like to display a waiting gif during this process, so the user can see that the process is running, and he need to wait.
Some precision:
- It's only a javascript file with no html page
- The script is launched with a button in our software and I have access to ActiveXObject if necessary
Here is a sample code :
function importFec()
{
var iOpenDlg = 1;
var sPath = "Deskop";
var sTypes = "Fichier Texte (*.txt)|*.txt";
var sExt = "txt";
//Allow me to select a file in Windows
cheminFEC = fileDialog(iOpenDlg, sPath, sTypes, sExt);
var fso = new ActiveXObject("Scripting.FileSystemObject");
var ForReading = 1;
var f1 = fso.OpenTextFile(cheminFEC, ForReading);
var texte = f1.ReadAll();
var tableauFEC = [];
var tableauTest = [];
tableauFEC = texte.split(/\r\n/);
tableauTest = tableauFEC[0].split("\t");
var delimiter = "\t";
if (tableauTest.length == 1)
{
tableauTest = tableauFEC[0].split("|");
var delimiter = "|";
}
var nbColonne = tableauTest.length;
for (var i=0;i<tableauFEC.length;i++)
{
var tab = tableauFEC[i].split(delimiter);
tableauFEC[i] = new Array(25);
for (var j=0;j<nbColonne;j++)
{
tableauFEC[i][j] = tab[j];
}
}
//Make some change in the table to adapt my texte file
//Then create a new texte file C:\\FichierFEC\\FECModifie.txt
createNewFEC(tableauFEC);
var cwfConfiguration = Application.ApplicationInfo("ProgramPath")+"\\Library\\ImportFEC\\ImportFEC23032017.vgl"
var oImport = Import(ipASCII)
oImport.ImportComponents = CWImportComponents.icGeneralLedger
oImport.ASCIILayoutFile = cwfConfiguration
oImport.ASCIIDataFile = "C:\\FichierFEC\\FECModifie.txt"
//This is the function which take a long moment to execute
oImport.RunImport()
}
Thanks for your answer and explanation

I finnaly found another solution.
At the beggining of my script, I launch a .hta file with a GIF and a small texte.
At the end of my script, I close the .hta file
Thanks

Read input field files when seperate button is clicked

With the following input field, the user submits one or multiple HTML files.
<input type="file" id="inputfield" accept="text/html" multiple/>
<div id="get-files">Get Files</div>
When get-files is clicked, how can I get the content of each file on the input field and mess with each file content using the fileReader API?
I tried the following but receive no errors or content.
$("#get-files").on("click", function() { getFilesContent(); });
function getFilesContent() {
var pages = $("#inputfield")[0].files;
// get files data
for (var i = 0; i < pages.length; i++) {
var reader = new FileReader();
reader.onload = (function() {
return function(e) {
console.log($("#inputfield")[0].result);
}
});
reader.readAsText(pages[i]);
}
}

Try this instead
function getFilesContent() {
var pages = $("#inputfield")[0].files;
for (let i = 0; i < pages.length; i++) {
let reader = new FileReader();
reader.onload = function() {
console.log(reader.result);
}
reader.readAsText(pages[i]);
}
}
reader.result contains your HTML data.

javascript FileReader get name?

I'm working on a simple script for my site to upload images. I have a multiple file input <input type = 'file' name = 'files[]' id = 'hiddenFile' multiple> that is being triggered by a div click. When I queue the files, I want to be able to delete one. I know I can loop through the $('#hiddenFile').val() and splice to get the name out but I'm having an issue with figuring out the file name. When I assign the file to a new img container, how do I get the name? I've tried console.log(f.name) and a few variations but it returns an undefined error. Here are my scripts. I think I'm pretty close but this is something I'm learning as I go. Thanks!
function readURL(input) {
var files = $('#hiddenFile')[0].files; //where files would be the id of your multi file input
//or use document.getElementById('files').files;
for (var i = 0, f; f = files[i]; i++) {
var reader = new FileReader();
reader.onload = function (e) {
console.log(f.name); //how can I get the
//file name here to add it to the image as an attribute?
$("<img src = '"+e.target.result+"' class = 'addedImg'>").appendTo("#imgBox");
};
reader.readAsDataURL(f);
}
}
$(document).ready(function(){
$(document).on('click', '#addBtn', function(e){
e.preventDefault();
$('#hiddenFile').click();
});
});

Try using change event , defining f within an IIFE , setting title attribute value to f.name
$(document).ready(function() {
$(document).on('click', '#addBtn', function(e) {
e.preventDefault();
$('#hiddenFile').click();
});
$("#hiddenFile").change(function(event) {
var files = this.files;
var i = 0,
len = files.length;
(function readFile(n) {
var reader = new FileReader();
var f = files[n];
reader.onload = function(e) {
console.log(f.name);
$("<img src=" + e.target.result + " class=addedImg title=" + f.name + ">")
.appendTo("#imgBox");
// if `n` is less than `len` ,
// call `readFile` with incremented `n` as parameter
if (n < len -1) readFile(++n)
};
reader.readAsDataURL(f); // `f` : current `File` object
}(i)); // `i` : `n` within immediately invoked function expression
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="addBtn">click</div>
<input type="file" style="display:none" id="hiddenFile" multiple />
<div id="imgBox"></div>

The FileReader object itself does not have access to the file name. You get the file name while you're iterating over the files list as you are doing in your for loop.
var reader = new FileReader();
reader.onload = function (e) {
//update image src or something
};
for (var i = 0, f; f = files[i]; i++) {
reader.readAsDataURL(f); //updates image src or something
//additional method to do something with file name goes here
}
And if you really want to have one method that does those two things in the for loop, then you can wrap it all up in a closure like #ebidel does in his answer here - Get filename after filereader asynchronously loaded a file#answer-12547471.