How do I access an element created by javascript for upload?

Question

I am trying to automatically prompt a user to upload a CSV file and then I plan to access the data within, but I am unable to do this. What am I doing wrong? input.name is always undefined and viewing the whole object doesn't provide any relevant details.

The source of this query primarily came from the answer to this question Open file dialog box in JavaScript. I am trying to achieve this purely in javascript, not HTML.

jsfiddle

$(document).ready(function() {
        var input = $(document.createElement('input')); 
    input.attr("type", "file");
    input.on('change',function(){
        alert(JSON.stringify(input.name, null, 4));
        alert(JSON.stringify(input, null, 4));
        });
    input.trigger('click');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

If you are trying to read the content of the csv file you will need to use the [FileReader() API](https://developer.mozilla.org/en-US/docs/Web/API/FileReader/FileReader). Trying to stringify the input won't do you any good — charlietfl, Dec 27 '21 at 01:10
I am stringifying the object to demonstrate it is missing the file path. I cannot pass this to FileReader until I have the file path. FYI I already have this working with standard HTML file input, but I am trying to achieve this purely in JavaScript. — pholcroft, Dec 27 '21 at 05:13
FileReader does not need the file path. Read the docs more thoroughly and look at examples.The local file path is not accessible in javascript due to security restrictions — charlietfl, Dec 27 '21 at 11:26
Thank you. I have read the docs and [I see you are correct](https://developer.mozilla.org/en-US/docs/Web/API/FileReader). — pholcroft, Dec 27 '21 at 23:37

score 2 · Answer 1 · answered Dec 27 '21 at 00:29

2

input is the return value of $(). It is a jQuery object not a DOM object. To access the name property of the underlying DOM object, use the prop method.

input.prop('name')

answered Dec 27 '21 at 00:29

Quentin

914,110
126
1,211
1,335

Thank you, this lead me to realise that actually this was a valid object as prop returned a value, but the stringify was failing and my method to "view" the object was flawed. I switched to using the debugger and this lead me to the solution. (I also read up on the difference between prop and attr which was extremely important information") – pholcroft Dec 29 '21 at 01:16

pholcroft · Accepted Answer · 2023-06-07T11:53:31.393

I finally got it working. Here is the solution.

NOTE: This is for use in a Chrome extension. Chrome extensions have additional permissions and capabilities that allow them to interact with the browser and perform actions that regular JavaScript on web pages cannot. For a version that works with a regular web page see PPL's answer below, but it will require the user to click the button.

$(document).ready(function() {
  var input = $(document.createElement('input'));
  input.attr("type", "file");
  input.on('change', function() {
    var csvFile = input[0].files[0];
    var ext = csvFile.name.split(".").pop().toLowerCase();

    if (ext != "csv") {
      alert('upload csv');
      return false;
    }
    if (csvFile != undefined) {
      reader = new FileReader();
      reader.onload = function(e) {
        var data = $.csv.toObjects(e.target.result);
        alert(JSON.stringify(data, null, 4));

        $.each(data, function(index, val) {
          //do something with each row of data val.ColumnName

        });
      }
      reader.readAsText(csvFile);
    }
  });
  input.trigger('click');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.21/jquery.csv.js"></script>

score 1 · Answer 3 · edited Jan 30 '23 at 18:28

Updated method with security implementations in place: 2023-01-24

You just can't use the document ready function but have to force the user to initiate the file open dialog:

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript">
    console.log(jQuery(). jquery);
    
    $("#file-upload").click(function() {
      var input = $(document.createElement('input'));
      input.attr("type", "file");
      input.on('change', function() {
        var csvFile = input[0].files[0];
        var ext = csvFile.name.split(".").pop().toLowerCase();

        if (ext != "csv") {
          alert('upload csv');
          return false;
        }
        if (csvFile != undefined) {
          reader = new FileReader();
          reader.onload = function(e) {
            var data = $.csv.toObjects(e.target.result);
            alert(JSON.stringify(data, null, 4));

            $.each(data, function(index, val) {
              //do something with each row of data val.ColumnName

            });
          }
          reader.readAsText(csvFile);
        }
      });
      input.trigger('click');
    });

</script>
</head>
<body>
    <a href="#" id="file-upload">Upload file</a>
</body>
</html>

I should have mentioned I was using this POC within a Chrome extension, I've updated my solution to specify this. This is a good solution for use on a regular web page. — pholcroft, Jun 07 '23 at 11:55

How do I access an element created by javascript for upload?

3 Answers3

Linked