SoftTimur SoftTimur - 2 months ago 19
CSS Question

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

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)...

Answer

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>