¿Por qué event.target.files[0].name está mostrando un error en mi código?

12 Jun, 2023 Programación 0

Tengo este código JS (que se muestra a continuación) que convierte un archivo JSON a un archivo XML. Todo funciona perfectamente (obtengo el contenido del archivo), pero ahora quiero obtener el nombre del archivo cargado.

function onChange(event) {
        var reader = new FileReader();
        reader.onload = (event)=>{
          let data = JSON.parse(event.target.result);
          $("#jsonArea").val(event.target.result);
          var finalXML = '<root>' + x2js.json2xml_str($.parseJSON(event.target.result)) + '</root>';
          var finalName = event.target.files[0].name; //se establece aquí
          $("#xmlArea").val(finalXML);

          finalXML = finalXML.split('FORM3CA').join('FORM3CB&##39);
          finalXML = finalXML.split('F3CA').join('F3CB');
          finalXML = finalXML.split('<CreationInfo>')[0] + '<CreationInfo><SWVersionNo>1.0</SWVersionNo><SWCreatedBy>SW20000</SWCreatedBy><JSONCreatedBy>SW20000</JSONCreatedBy><JSONCreationDate>2021-11-21</JSONCreationDate><IntermediaryCity>311</IntermediaryCity></CreationInfo>' + finalXML.split('</CreationInfo>')[1]
          finalXML = finalXML.split('I_We1').join('I_We');

          console.log(finalName); //aquí
        }
        reader.readAsText(event.target.files[0]);
    }

document.getElementById('file').addEventListener('change', onChange);

Se me sugirió que usara event.target.files[0].name para obtener el nombre del archivo cargado (por @HeryKurniawan en los comentarios de este post). Pero, cuando intento console.log() la variable finalName (como se muestra en el código anterior), me muestra este error –

¿Qué está mal en mi código? También he intentado usar event.target.file.name y event.target.file[0].name, pero eso tampoco funciona. Por favor, ayúdame… ¡Gracias! 🙂

Answer

davy.ai

June 12, 2023 at 6:40 am
El mensaje de error “Cannot read property ‘name’ of undefined” significa que no se puede acceder a la propiedad ‘name’ porque el objeto ‘event.target.files[0]’ es indefinido o no existe. Esto puede ocurrir si el escuchador de eventos se activa antes de que se seleccione/cargue un archivo.

Para corregir este error, puede agregar una verificación para asegurarse de que se haya seleccionado un archivo antes de intentar acceder a su nombre. Puede modificar la función onChange de la siguiente manera:
```
function onChange(event) {
  if (event.target.files.length > 0) {
    var reader = new FileReader();
    reader.onload = (event)=>{
      let data = JSON.parse(event.target.result);
      $("#jsonArea").val(event.target.result);
      var finalXML = '<root>' + x2js.json2xml_str($.parseJSON(event.target.result)) + '</root>';
      var finalName = event.target.files[0].name;
      $("#xmlArea").val(finalXML);

      finalXML = finalXML.split('FORM3CA').join('FORM3CB');
      finalXML = finalXML.split('F3CA').join('F3CB');
      finalXML = finalXML.split('<CreationInfo>')[0] + '<CreationInfo><SWVersionNo>1.0</SWVersionNo><SWCreatedBy>SW20000</SWCreatedBy><JSONCreatedBy>SW20000</JSONCreatedBy><JSONCreationDate>2021-11-21</JSONCreationDate><IntermediaryCity>311</IntermediaryCity></CreationInfo>' + finalXML.split('</CreationInfo>')[1]
      finalXML = finalXML.split('I_We1').join('I_We');

      console.log(finalName);
    }
    reader.readAsText(event.target.files[0]);
  }
}

document.getElementById('file').addEventListener('change', onChange);
```
En este código modificado, agregamos una declaración if para comprobar si hay al menos un archivo seleccionado antes de continuar. Al hacer esto, evitamos intentar acceder a la propiedad name de un objeto indefinido.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

¿Por qué event.target.files[0].name está mostrando un error en mi código?

Answer

davy.ai