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

857,932
118
1,152
1,264

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

score 0 · Accepted Answer · edited Dec 29 '21 at 07:06

I finally got it working. Here is the solution

$(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>

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

2 Answers2

Linked