1

estoy realizando un curso y para cargar una imagen en un formulario se utiliza el siguiente codigo, el cual no explican muy bien y he buscado por internet pero no logro entender como funciona

let reader = new FileReader();
            reader.onload = ((theFile) => {
                console.log(theFile);
                return (e) => {
                    console.log(e);
                    //Insertamos la imagen
                    document.getElementById('fotos').innerHTML = 
                    ['<img class = "responsive-img" src = "', e.target.result,
                '"title"', escape(theFile.name), '"/>'].join('');
                };

            })(f);
            reader.readAsDataURL(f);

Lo que comprendo es que al leerse el archivo se activa el metodo anonimo de reader.onload y el parametro theFile es el archivo que se leyo, le hice un console log y puedo ver que sale informacion de la imagen como el nombre, tamaño entre otras cosas, pero no comprendo el parametro e de return, al hacerle console log igual me muestra informacion mas detallada de la imagen pero no comprendo por qué o como funciona, el codigo funciona bien pero quisiera comprender como funciona ese return, tampoco comprendo por que al final esta como parametro la variable f, a que funcion le está llegando como parametro?

1
  • si colocas todo el codigo te podria dar un mejor explicacion!
    – Bryro
    el 24 mar. 2020 a las 5:30

2 respuestas 2

1

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>

0

Cuando define el método que se ejecutará en el onload está haciendo uso del IIFE(Immediately Invoked Function Expression) que es una función que se autollama inmediatamente luego de haberla declarado.

En tu código el IIFE sería esto ((thefile) => { ... })(f) <-- invocación inmediata como parametro el fichero que has leído

Como dicho IIFE devuelve una función pues esta función es la que se asigna a la propiedad onload del reader. Que pasaría a ser esto luego de haberse ejecutado el IIFE.

reader.onload = (e) => {
        console.log(e);
        //Insertamos la imagen
        document.getElementById('fotos').innerHTML = 
        ['<img class = "responsive-img" src = "', e.target.result,
    '"title"', escape(theFile.name), '"/>'].join('');
    };

El parametro `e` es el que le pasa JS cuando ha leído el fichero.

IIFE

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.