input file: write the name of the file in a text input with Javascript

Question

I'm learning html and javascript and I wonder if it is possible to do the following: when uploading a file using a file input want the uploaded filename (without path) is written to a file input field .. Is this possible?. Below is my code but can not get any link which explain how to do it for newbies. Sorry if it is a very silly question, but I wonder if you can do only using javascript (not jQuery) and HTML without involving the server.

<html>
    <head>
        <script type="text/javascript">
            (function alertFilename()
            {
                var thefile = document.getElementById('thefile');
        //here some action to write the filename in the input text

            }
        </script>
    </head>
    <body>
        <form>

            <input type="file" id="thefile" style="display: none;"  />
            <input type="button" value="Browse File..." onclick="document.getElementById('thefile').click();" />
            <br> <br>The name of the uploaded file is:
            <input type="text" name="some_text" id="some_text" />

        </form>
    </body>
</html>

Asaf · Accepted Answer · 2013-09-18 00:53:11Z

4

Here is a fully working example JavaScript:

var filename;
document.getElementById('fileInput').onchange = function () {
   filename = this.value.split(String.fromCharCode(92));
   document.getElementById("some_text").value = filename[filename.length-1];
};

HTML:

<form>
    <input type="file" id="fileInput" style="display: none;"  />
    <input type="button" value="Browse File..." onclick="document.getElementById('fileInput').click();" />
    <br> <br>The name of the uploaded file is:
    <input type="text" name="some_text" id="some_text" />
</form>

jsFiddle live example

Hope you find it helpful, Asaf

answered Sep 18, 2013 at 0:53

Asaf

5571 gold badge7 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

novaKid Over a year ago

in jsFiddle code works perfect, but when when I do it on my pc tells me the following error: Uncaught TypeError: Can not set property 'onchange' of null. Need to write something in my code? ...

Ventricle · Accepted Answer · 2016-03-15 16:37:19Z

1

For the newcomers:

document.getElementById("thefile").onchange = function() {
  document.getElementById("some_text").value = this.files[0].name;
};

/* BELOW FULLPATH VERSION (depending on browser)

document.getElementById("thefile").onchange = function () {
document.getElementById("some_text").value = this.value;
};*/

<form>

  <input type="file" id="thefile" style="display: none;" />
  <input type="button" value="Browse File..." onclick="document.getElementById('thefile').click();" />
  <br>
  <br>The name of the uploaded file is:
  <input type="text" name="some_text" id="some_text" />

</form>

answered Mar 15, 2016 at 16:37

Ventricle

655 bronze badges

Comments

Misters · Accepted Answer · 2013-09-18 00:43:11Z

0

Just take the file input' value, split it and take the last index:

Filename = document.getElementById('fileinput').value.split('/') [2];// or the last index returned here since the last index will always be the file name

(Sorry that cant format my answer. I answered by a smartphone)

answered Sep 18, 2013 at 0:43

Misters

1,3572 gold badges16 silver badges30 bronze badges

Collectives™ on Stack Overflow

input file: write the name of the file in a text input with Javascript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related