I am working on this for the past 6 hours, and I am unable to figure this out.
I am trying to create a website, in which I choose a folder of images and I show them in my document. I get the first image to show, and then I get the following error in my console.
Uncaught DOMException: Failed to execute 'readAsDataURL' on 'FileReader': The object is already busy reading Blobs.(…)
I believe the issue is caused due to my for loop because the filereader is asynchronous. But I need to loop through the whole array for this, so what am I doing wrong?
I load the files (will check to make sure I get only images later), into an array, and then I read each file one at a time.
Before breaking down my code to functions I did everything in a single function and it works! I included the HTML + the original and current JS code. Thank you for taking the time to see this.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Tiled Image Viewer</title>
<script src=js/tiv.js></script>
<link rel=stylesheet href=style.css>
<meta name=viewport content=width=device-width, initial-scale=1.0>
</head>
<body>
<div id=main-wrap>
<form name=uploadForm>
<input id=images type=file webkitdirectory mozdirectory directory name=myFiles
onchange=readAndShowFiles(); multiple/>
<span id=list></span>
</form>
</div>
</body>
</html>
Javascript Original:
function readAndShowFiles() {
var files = document.getElementById(images).files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
// Have to check that this is an image though
// using the file.name TODO
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(file) {
return function(e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = ['<img src=', e.target.result,
' title=', escape(file.name), '>'].join('');
document.getElementById('list').insertBefore(span, null);
};
})(file);
// Read in the image file as a data URL.
reader.readAsDataURL(file);
}
}
Javascript Current:
function readAndShowFiles() {
console.log(Checkpoint2); //test
var tiv = new tivAPI();
var array = tiv.getLoadedImages();
tiv.showLoadedImages(array);
}
function tivAPI(){
var imagesarray = new Array();
return{
loadImages: function(){
console.log(Loading Files); //test
var files = document.getElementById(images).files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
// Have to check that this is an image though
// using the file.name TODO
}
console.log(files.length); //test
return files;
},
getLoadedImages: function(){
imagesarray = this.loadImages();
console.log(Returning Files); //test
console.log(imagesarray.length);
return imagesarray;
},
showLoadedImages: function(elem){
console.log(Showing Files); //test
var files = elem;
var reader = new FileReader();
// Closure to capture the file information.
for (var i = 0; i < files.length; i++) {
var file = files[i];
reader.onload = (function(file) {
return function(e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = ['<img src=', e.target.result,
' title=', escape(file.name), '>'].join('');
document.getElementById('list').insertBefore(span, null);
};
})(file);
// Read in the image file as a data URL.
reader.readAsDataURL(file);
}
}
};
}
