Primero: hay un error en el html que se concatena (que no es la manera correcta de hacerlo por demás).
[
'<img class = "responsive-img" src = "',
e.target.result,
'"title"', // debiera ser '" title="'
escape(theFile.name),
'"/>'
].join('');
Formaría un tag de la forma:
<img class = "responsive-img" src = "data:image/png;base64,ASDFG"title"miarchivo.png"/>
Pero debiera ser
<img class = "responsive-img" src = "data:image/png;base64,ASDFG" title="miarchivo.png"/>
Por otro lado, en vez de concatenar tú mismo el HTML, es más elegante pedirle al DOM que lo haga por tí:
let img = document.createElement('img');
img.src = e.target.result;
img.title = theFile.name;
document.getElementById('fotos').appendChild(img);
Dicho esto, el API FileReader de HTML5 tiene entre otras características:
- métodos para leer objetos de tipo File como por ejemplo FileReader.readAsDataURL()
- handlers (manejadores de eventos) que, de ser declarados, luego de instanciar el FileReader, se invocarán usando como parámetro el evento al que escuchaban
- un handler como
onload
recibe un evento con el resultado de la lectura. Si esa lectura fue mediante readAsDataURL
naturalmente el evento contiene un dataURI. Si se hubiera leído como binario tendría en cambio acceso byte por byte al contenido.
- otros handlers reciben otro tipo de evento. Por ejemplo
onerror
no tiene el contenido del archivo sino el mensaje y stack del error que se haya producido
- Otros métodos que son irrelevantes en esta pregunta
Tradicionalmente, el flujo es instanciar el FileReader, declarar la función handler para el evento onload
, leer un archivo, (se gatilla el handler), dentro del handler hacer algo con el archivo (moverlo a un div, subirlo al backend, etc)
// Flujo clásico
let theFile=<archivo leído desde el input>,
reader = new FileReader();
reader.onload=function(e) {
// hacer algo con e.target.result, que es el contenido base64
};
reader.readAsDataURL(theFile);
En tu código, como se requiere disponer del nombre del archivo (para dar el atributo title
a la imagen) y el evento e
no lo trae, usan el truco de declarar el handler como una función que recibe el archivo y devuelve el verdadero handler, que queda esperando.
Esto podría expresarse como
/**
* @param {File} fileObject un objeto File, valga la redundancia
*/
function generaOnloadHandler( fileObject ) {
return function(e) {
console.log({
contenido: e.target.result,
nombre: fileObject.name;
});
}
}
// Y más abajo
reader.onload=generaOnloadHandler(theFile) // devuelve el handler generado
Todo esto es quizá demasiado elaborado, ya que, al estar declarado en el mismo contexto que el fileReader, el handler sí tiene acceso al nombre del archivo, porque f
es una variable libre.
Bastaría con hacer:
reader.onload = (e) => {
console.log({
contenido: e.target.result,
nombre: f.name; // accedo directo a f
});
};
reader.readAsDataURL(f);
Pero si nos ponemos elaborados, se puede usar el hecho que un closure es "bindeable". Podemos pasarle un contexto y de ahí en adelante ese closure considerará que this
es el contexto que le pasamos.
reader.onload = (function (e) {
console.log({
contenido: e.target.result,
nombre: this.name; // `this` es f, porque quedó bindeada a ese contexto
});
}).bind(f);
Ojo: Esto no funciona si en vez de (function(e) {..})
intentas usar (e=>{ ... })
Te dejo los tres enfoques como un snippet:
const inputOnloadClasico = document.getElementById("onload_clasico"),
inputOnloadGenerado = document.getElementById("onload_generado"),
inputOnloadBinded = document.getElementById("onload_binded"),
divFotos = document.getElementById("fotos");
inputOnloadClasico.addEventListener("change", (event) => {
let files = event.target.files,
reader = new FileReader(),
f = files[0];
reader.onloadend = (e) => {
let img = document.createElement('img');
img.src = e.target.result;
img.title = f.name;
divFotos.appendChild(img);
};
reader.readAsDataURL(f);
}, false);
inputOnloadGenerado.addEventListener("change", (event) => {
let files = event.target.files,
reader = new FileReader(),
f = files[0];
reader.onload = ((theFile) => {
return (e) => {
let img = document.createElement('img');
img.src = e.target.result;
img.title = theFile.name;
divFotos.appendChild(img);
};
})(f);
reader.readAsDataURL(f);
});
inputOnloadBinded.addEventListener("change", (event) => {
let files = event.target.files,
f = files[0],
reader = new FileReader();
reader.onloadend = (function(e) {
let img = document.createElement('img');
img.src = e.target.result;
img.title = this.name; // WHAAAT como "this.name"?
divFotos.appendChild(img);
}).bind(f); // binding magic
reader.readAsDataURL(f);
}, false);
#fotos {
padding: 5px;
}
#fotos img {
float: left;
height: 100px;
width: 100px;
margin: 5px;
}
label {
display: inline-block;
font-family:monotype;
float: left;
clear: left;
width: 120px;
text-align:right;
margin-right:5px;
}
input {
border:1px solid #ccc;
border-radius:4px;
min-width:340px;
}
<div>
<label>onload clásico:</label><input type="file" id="onload_clasico" />
</div>
<div>
<label>onload generado:</label><input type="file" id="onload_generado" />
</div>
<div>
<label>onload binded:</label><input type="file" id="onload_binded" />
</div>
<div id="fotos"></div>