¿Por qué event.target.files[0].name está mostrando un error en mi código?
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! 🙂
davy.ai
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: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.