0
605
Views¿Por qué event.target.files[0].name muestra un error en mi código?
Tengo este código JS (que se muestra a continuación) que convierte un archivo JSON en 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; //setting it here $("#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); //here } reader.readAsText(event.target.files[0]); } document.getElementById('file').addEventListener('change', onChange); Me sugirieron usar event.target.files[0].name para obtener el nombre del archivo subido (por @HeryKurniawan en los comentarios de esta publicación). Pero, cuando trato de console.log() la variable finalName (como puede ver en el código anterior), me muestra este error:
¿Qué esta mal en mi codigo? También he intentado usar event.target.file.name & event.target.file[0].name , pero tampoco funciona. Amablemente guía... ¡Gracias! :)
2 answers
Answer question0
Está utilizando dos event que tienen el mismo nombre e intenta usarlos con el mismo alcance:
$("#jsonArea").val(event.target.result); // Here is event from FileReader.onload var finalName = event.target.files[0].name; // Here you try to use event from onChangeEntonces, los nombres de las caras se sobrescriben, es por eso que obtienes un error.
Para resolverlo, usa diferentes nombres:
function onChange(event) { var reader = new FileReader(); reader.onload = (frEvent)=>{ let data = JSON.parse(frEvent.target.result); $("#jsonArea").val(frEvent.target.result); var finalXML = '<root>' + x2js.json2xml_str($.parseJSON(frEvent.target.result)) + '</root>'; var finalName = frEvent.target.fileName; //setting it here $("#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); //here } reader.readAsText(event.target.files[0]); } document.getElementById('file').addEventListener('change', onChange);0
En primer lugar, gracias a todos los que respondieron / comentaron.
Obtuve el resultado deseado al hacer esto:
finalName = document.getElementById('file').value
¡Muchas gracias! :)