Why is event.target.files[0].name showing error in my code?

Question

I have this JS code (given below) which converts a JSON file to XML file. Everything works perfectly (I get the contents of the file), but now I want to fetch the filename of the uploaded file.

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);

I was suggested to use event.target.files[0].name in order to get the filename of the uploaded file (by @HeryKurniawan in comments of this post). But, when I try to console.log()the finalName variable (as you can see in above code), it shows me this error -

What is wrong in my code? I have also tried using event.target.file.name & event.target.file[0].name, but that doesn't work either. Kindly guide... Thanks! :)

Because files[0] is undefined. You probably don't have any file selected. — GoldenretriverYT, Nov 30 '21 at 06:55
Have you tried naming your `event` from both events differently? Because now you try to access `event.target.files[0].name` of _FileReader_ and it does not have that property — Justinas, Nov 30 '21 at 07:02
Hi @GoldenretriverYT - the error I posted only comes after I select the file. Here's a more detailed screenshot - https://i.ibb.co/xgF75Vd/image.png ; Kindly have a look :) — Sonal, Nov 30 '21 at 07:10
Hi @Justinas - Thanks for replying, but unfortunately I don't know what that means - can you provide an example/link a relevant post here? That would be of great help... Thanks! — Sonal, Nov 30 '21 at 07:12

score 1 · Answer 1 · answered Nov 30 '21 at 07:22

You are using two events that has same name event and try to use it is same scope:


$("#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 onChange

So you face names overwrite, that's why you get error.

To solve it, use different names:

    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);

score 0 · Answer 2 · answered Nov 30 '21 at 07:29

0

First of all, thank you everyone who answered/commented.

I got my desired result by doing this -

finalName = document.getElementById('file').value

Thanks a lot! :)

answered Nov 30 '21 at 07:29

Sonal

137
2
13

Why is event.target.files[0].name showing error in my code?

2 Answers2