Change "Choose File" button and keep showing the file name

Question

It is an old question, but I have not found a solution that fulfils my need.

First, I want to change to Choose File to another button style (eg, btn btn-primary). Second, after choosing a file, I still want its name to be shown on the screen, so that people know what has been chosen.

I have tried two solutions in Chrome 53.0.2785.116. They do change the text of Choose File, whereas none of them shows the file name in response:

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript">
    function performClick(elemId) {
      var elem = document.getElementById(elemId);
      if(elem && document.createEvent) {
      var evt = document.createEvent("MouseEvents");
      evt.initEvent("click", true, false);
      elem.dispatchEvent(evt);
      }
    }
  </script>
</head>
<body>
  <form action="uploadfile.php" method="post" enctype="multipart/form-data">

    <!-- http://stackoverflow.com/a/16015086/702977 -->
    <a href="#" class="btn btn-primary" type="button" onclick="document.getElementById('file').click(); return false;">Browse</a> <input id="file" name="file" type="file" style="visibility: hidden; display: none;" />

    <!-- http://stackoverflow.com/a/6463467/702977 -->
    <!-- <a href="#" class="btn btn-primary" type="button" onclick="performClick('file');">Choose File</a><input type="file" name="file" id="file" style="position: fixed; top: -100em" />-->

    <input type="submit" id="u_button" name="u_button" value="Upload the file">
  </form>
</body>
</html>

Here is JSBin

Does anyone have a solution? I am open to non-purely HTML solution as well (eg, JQuery)...

For security reasons, JS never exposes the actual file path of a selected file to the browser. — Terry, Oct 02 '16 at 23:58
Possible duplicate of [How to get full path of selected file on change of using javascript, jquery-ajax?](http://stackoverflow.com/questions/15201071/how-to-get-full-path-of-selected-file-on-change-of-input-type-file-using-jav) — Terry, Oct 02 '16 at 23:58
Guys, I made a mistake, I want to show `file name` rather than `file path`... — SoftTimur, Oct 03 '16 at 00:04
You can access the file name by accessing the `value` attribute of the input. Some OS/browsers may supply a dummy path, so you might want to use regex to parse the value to obtain the file name. And again, **this question has been asked before: http://stackoverflow.com/questions/2189615/how-to-get-file-name-when-user-select-a-file-via-input-type-file**. — Terry, Oct 03 '16 at 00:08

score 0 · Accepted Answer · answered Oct 03 '16 at 00:05

You can create a function to handle change event at <input type="file"> element, create a <label> element with for attribute set to input type="file" id, set .webkitRelativePath of File object, , File object .name or .value property of input element, sliced from last \ character to end of string, set .innerHTML of <label> element to resulting string

<!DOCTYPE html>
<html>
<head>
  <title>JS Bin</title>
     <script type="text/javascript">
     function performClick(elemId) {
     var elem = document.getElementById(elemId);
     if(elem && document.createEvent) {
     var evt = document.createEvent("MouseEvents");
     evt.initEvent("click", true, false);
     elem.dispatchEvent(evt);
     }
     }
        
        function handleFile(elem) {
          console.log(elem.files[0].name, elem.value);
          document.querySelector("[for='file']")
          .innerHTML = elem.files[0].webkitRelativePath 
                       || elem.files[0].name
                       || elem.value.slice(
                           elem.value.lastIndexOf("\\") + 1
                          );
        }
   </script>
</head>
<body>
  <form action="uploadfile.php" method="post" enctype="multipart/form-data">
    
    <!-- http://stackoverflow.com/a/16015086/702977 -->
    <a href="#" class="btn btn-primary" type="button" onclick="document.getElementById('file').click(); return false;">Browse</a> <input id="file" name="file" type="file" style="visibility: hidden; display: none;" onchange="handleFile(this)" />
    
    <!-- http://stackoverflow.com/a/6463467/702977 -->
    <!-- <a href="#" class="btn btn-primary" type="button" onclick="performClick('file');">Choose File</a><input type="file" name="file" id="file" style="position: fixed; top: -100em" />-->

 <input type="submit" id="u_button" name="u_button" value="Upload the file"><label for="file"></label>
  </form>
</body>
</html>

Change "Choose File" button and keep showing the file name

1 Answers1