HTML5 FileReader in Opera - javascript

I am trying to read multiple local ogg audio files using the file reader api in opera 12 by converting them into data urls and storing them into an array which I intend to access later.
function music(list)
{
var playlistlength=0;
try
{
for (var temp=0; temp < list.files.length; temp++)
{
f[playlistlength][0] = list.files.item(temp).name;
var freader = new FileReader();
freader.onload = function(frevent){
f[playlistlength][1]=frevent.target.result;
};
freader.readAsDataURL(list.files[temp]);
playlistlength++;
}
}
catch(e)
{
alert("Error");
}
}
However upon inspection in the debugger, in the for loop , no statement is executed and it jumps to the catch block, unable to figure it out.Can someone explain why its happening and any alternatives if possible? Thanks in advance.

This works on jsFiddle. I made it from your code, is your use of it similar ?
HTML :
​<input type="file" id="browser"/>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
Javascript :
function music(list)
{
var playlistlength=0;
var f = new Array();
try
{
for (var temp=0; temp < list.files.length; temp++)
{
var music = new Array();
music[0] = list.files.item(temp).name;
var freader = new FileReader();
freader.onload = function(frevent){
music[1]=this.result;
f.push(music);
alert(f);
};
freader.readAsDataURL(list.files[temp]);
playlistlength++;
}
alert(f);
}
catch(e)
{
alert(e);
}
}
function FileSelectHandler(e) {
var list = e.target || e.originalEvent.dataTransfer;
music(list);
}
document.getElementById("browser").onchange = FileSelectHandler;
Why it didn't work ?
First you tried to set a value in f[playlistlength][1], because of
the onload function asynchronously executing after the
playlistlength++. It crashed because this reference didn't exist.
f was probably wrong declared ​

Related

Comparaison between different input files in javascript, cannot reach global variable

I'm trying to open different JSON files and compare each others values.
To do it, I used this to read the files. But I'm trying to save every data in a global variable 'data'. I think it's a asynchronous mistake but I'm pretty new to javascript and I didn't understand where the error come from.
Here is my code :
var data = {}
function readmultifiles(files) {
var reader = new FileReader();
function readFile(index) {
if( index >= files.length ) return;
var file = files[index];
reader.onload = function(e) {
// get file content
var bin = e.target.result;
bin = JSON.parse(bin);
for(task in bin['values']){
addData(bin['info']['date'],task,bin['values'][task]);
}
// do sth with bin
readFile(index+1);
}
reader.readAsBinaryString(file);
}
readFile(0);
console.log("readmultifiles");
console.log(data);
return data;
}
function addData(date, task, value){
if(data[task] == undefined){
data[task] = {};
}
data[task][date] = value;
}
var fileInput = document.querySelector('#file');
fileInput.addEventListener('change', function() {
console.log(fileInput);
var files = fileInput.files;
readmultifiles(files);
console.log("index");
console.log(data);
console.log(data['task_1']); // I can't display this object because 'undefinned'
});
What happens? When I'm trying to watch 'data', firefox console display me the object but I cannot watch inside the object.
Firefox display
What do I need to do to make a good solution. Should I use timers to wait?

Waiting for FileReader to complete before continuing

So I am starting to work with HTML5 and JS for the first time to do some experiments for a future game. I am using FileReader to read in a local text file that will represent a map, and using a script to return an array of arrays based on the text read in.
The problem is, I am having trouble with undefined variables.. because my code is executing before FileReader is able to read in the input file and do its processing. This is my block that reads in:
document.getElementById('input').addEventListener('change', function() {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function(e) {
let map = readMap(e.target.result);
}
reader.readAsText(file);
}, false);
readMap() is an external function that simply takes the raw text and returns a 2d array based on it. This all works great.. and I tested that by logging inside of the readMap function. The issue is that I am referencing this 'map' variable later on in this file in order to read it, render it, etc. I immediately get 'Uncaught ReferenceError: map is not defined' when loading my code. This makes perfect sense... since the above block did not yet get to execute.. as it is still waiting on the user to select an input file.
Here is one of the few functions that need access to the 'map' later on in the code:
function drawMap() {
let x = 0;
let y = 0;
for(var i=0; i<map.length;i++) {
for(var j=0; j<map[i].length;j++) {
if(map[i][j] === 1) {
ctx.fillRect(x,y,BLOCK_SIZE,BLOCK_SIZE);
x+=BLOCK_SIZE;
}
else if(map[i][j] === 'S') {
player.x = x;
player.y = y;
x+=BLOCK_SIZE;
}
else {
x+=BLOCK_SIZE;
}
}
x=0;
y+=BLOCK_SIZE;
}
}
Im not sure if that helps, but I just wanted to give an example of how I need to use this array.
Being fairly new to JS, I am really not yet finished wrapping my head around the idea of onLoads and callbacks... but my feeling is that they are the way to go about making this work. I assume I need to somehow tell the rest of my code not to execute until the 'map' object is finished being created.
I hope that was clear. Any help is appreciated!
Call the function drawMap() or any other function only after you have received the data, thus within reader.onload callback, if you want to access this map later, make map variable global e.g.:
var map;
document.getElementById('input').addEventListener('change', function() {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function(e) {
map = readMap(e.target.result);
drawMap();
}
reader.readAsText(file);
}, false);
Or you can also pass map variable to drawMap function:
document.getElementById('input').addEventListener('change', function() {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function(e) {
let map = readMap(e.target.result);
drawMap(map);
}
reader.readAsText(file);
}, false);
function drawMap(map) {
let x = 0;
let y = 0;
for(var i=0; i<map.length;i++) {
for(var j=0; j<map[i].length;j++) {
if(map[i][j] === 1) {
ctx.fillRect(x,y,BLOCK_SIZE,BLOCK_SIZE);
x+=BLOCK_SIZE;
}else if(map[i][j] === 'S') {
player.x = x;
player.y = y;
x+=BLOCK_SIZE;
} else {
x+=BLOCK_SIZE;
}
}
x=0;
y+=BLOCK_SIZE;
}
}
there is also FileReaderInstance.onloadend event
reader.onloadend = () => drawMap()

Getting the content of each file in multiple file input using jquery

I need to fetch the content of each file in multiple file input using jquery and based on the file content i need to do some modifications in my page. Here is the code I have written to do the same. Here what is happening is If I select 3 files I am getting the content of 3rd file alone. If I use the index number instead of looping I am able to get the contents But If I use looping I am getting the last files content alone. Could someone explain me whats wrong with it ?
<input type="file" name="xsd" id="xsd" multiple="multiple">
$('#xsd').change(function(){
input = document.getElementById('xsd');
for(var i = 0; i < input.files.length ; i++)
{
file = input.files[i];
fr = new FileReader();
fr.readAsText(file);
fr.onload = function(e) {
var filecontent = fr.result;
// My logic here
}
}
});
Your problem is that the onload function is getting it's "fr" from a closure.
You can create a separate closure for each of the onload-callbacks by using an immediately-invoked anonymous function like this:
$('#file').change(function(){
input = document.getElementById('file');
for(var i = 0; i < input.files.length ; i++)
{
(function(i) {
var file = input.files[i];
var fr = new FileReader();
fr.onload = function(e) {
var filecontent = fr.result;
// My logic here
}
fr.readAsText(file);
})(i);
}
});

Read txt file using javascript

I need to read a file from the browser and I CANNOT use ajax.. it is necessary to be read locally..
this is not a duplicate from Reading a file using javascript
how can I do that?
ps: I also CANNOT use an engine like V8 http://code.google.com/p/v8/ I need to read it with the current native API from javascript!.. is there any way to do that?
ps2: it must run only with chrome, or firefox! IE and others doesnt matter
Here is the sample: DEMO
function readMultipleFiles(evt) {
//Retrieve all the files from the FileList object
var files = evt.target.files;
if (files) {
for (var i = 0, f; f = files[i]; i++) {
var r = new FileReader();
r.onload = (function (f) {
return function (e) {
var contents = e.target.result;
alert(contents);
};
})(f);
r.readAsText(f);
}
} else {
alert("Failed to load files");
}
}
document.getElementById('fileinput').addEventListener('change', readMultipleFiles, false);

Javascript File Reader

I may just not be understanding the file reader api, but
When I try to run:
for (var i = 0, f1, f2; f1 = files[sorted_index[i]], f2 = files[sorted_index[i+1]]; i=i+2) {
var file_one;
var file_two;
if(f1.size < f2.size){
file_one = f1;
file_two = f2;
} else {
file_one = f2;
file_two = f1;
}
var file_one_contents;
var file_two_contents;
var reader = new FileReader();
reader.readAsText(file_one);
reader.onload = readSuccess;
function readSuccess(evt){
file_one_contents = evt.target.result;
}
var reader = new FileReader();
reader.readAsText(file_two);
reader.onload = readSuccess2;
function readSuccess2(evt2){
file_two_contents = evt2.target.result;
}
console.log(file_one_contents);
console.log(file_two_contents);
The console log only contains undefined in it.
The goal of the script it two read in two CSVs and take the data from the pair of files and do some computations.
Thanks!
The API is asynchronous. The "success" functions are called when the operation completes, and that won't be immediate.
Move your console.log() calls to inside the handler functions.
edit — If you need to wait to start doing stuff until both files are ready, you can do something like this:
var countdown = 2;
var reader = new FileReader();
reader.readAsText(file_one);
reader.onload = readSuccess;
function readSuccess(evt){
file_one_contents = evt.target.result;
countdown--;
if (countdown === 0) go();
}
var reader = new FileReader();
reader.readAsText(file_two);
reader.onload = readSuccess2;
function readSuccess2(evt2){
file_two_contents = evt2.target.result;
countdown--;
if (countdown === 0) go();
}
There are more sophisticated ways to do it, of course, but that simple trick just waits until the counter is zero before calling "go()", which represents the function that'd work on processing the files.
I had a similar problem which solved the file read waiting by using ".onloadend" instead of "onload". In the code below x is bound to a "div" element
reader.onloadend = function (evt) {
x.innerHTML = evt.target.result;
}
With "onload" it was all undefined.

Categories