Get file path from input in html

Question

I hvae input file like:

<input type="text" id="txtPath" placeholder="No file selected" />
<input id="btnBrowse" type="button"  value="Browse..." onclick="document.getElementById('file').click();" />
<input type="file" id="loadFile" style="display:none;" id="file" name="file" />

And I want to alert the selected path, I tried like:

document.getElementById("loadFile").addEventListener("change", function(event) {
  let output = document.getElementById("txtPath");
  let files = event.target.files;
alert(files);
},false);

But this doesn't work, the error:

Cannot read property 'click' of null

Your file picker has two id attributes defined. `id="loadFile"` and `id="file"`. I suspect this is causing `onclick="document.getElementById('file').click();" ` to fail. — Kei, Sep 18 '19 at 12:33
@Kei you are right! **Codey** see [example](https://jsfiddle.net/calepsol/efdmxnkr/24/) — Software Developer, Sep 18 '19 at 12:56

score 1 · Accepted Answer · answered Sep 18 '19 at 13:03

1

You have duplicate id for input:

id="loadFile" style="display:none;" id="file"

<input type="text" id="txtPath" placeholder="No file selected" />
<input id="btnBrowse" type="button"  value="Browse..." onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file" />

World example jsfiddle

answered Sep 18 '19 at 13:03

Software Developer

609
4
14

Hi, it doesn't alert the file name, have you tested the jsFiddle link? – Codey Sep 20 '19 at 06:31
For alert file name `{ let output = document.getElementById("txtPath"); let files = event.target.files; alert(files[0].name) },false);` – Software Developer Sep 20 '19 at 07:38

Get file path from input in html

1 Answers1