Styling the input type file with CSS and a little JS, is this ok?

Question

What I am trying to do is to add a button for uploding a file, which i can style and which shows me the name of the chosen file.

I have searched a lot, and the more I search the more different sollutions I find. I found out, that you can't style the input directly, because you just cant... :(.

Finally I picked a little from every solution and came to the following:

I set up a span in a lable for the input[type file] and hid the input by display:none;.

Now I can style the span to my needs, and on click it calls the input. With the little JS at the end, take the value of the input (what is the name of the picked file) and show it insted of the span-text on the styled button.

but see yourself:

#input-file {
    display: none;
    }

.upload-btn {

    display: block;
    text-align: center;
    margin: 20px auto 20px;
    width: 50%;
    height: 30px;
    background-color: #fcff7f;
    line-height: 30px;

    }

.upload-btn:hover {
    background-color: #c39d5a;
    color: white;
    cursor: pointer;
    }

<label class="upload-btn">
  <input type="file" id="input-file" onchange="changeText()" />
  <span id="selectedFileName">Browse</span>
</label>


<script type="text/javascript">
  function changeText() {
    var y = document.getElementById("input-file").value;
    document.getElementById("selectedFileName").innerHTML = y;
  }
</script>

What I would like to know is, what is wrong with this? For my understanding it is very simple, so simple that i dont understand "yet" why all the solutions I found on the internet, are way more difficult. They allways try to use fake inputs, with opacity and so on.

So please can someone very experienced, tell me if I can use it like this, or do I have to change it? To what?

Thanks ;) and a lot of excuses for the bad english.

Answer 1

This functionality is not available in the browsers due to security reasons.

Checkout this explanation: https://stackoverflow.com/a/15201258/586051

Only Firefox browser allows it. Refer the following example in Firefox.

EDIT: You can get the file name of the selected file this way:

EDIT2: The following code snippet demonstrates the styling of file upload button. Here we are actually faking it but the end user wouldnt know about it. ;)

EDIT3: Added value of fullPath in the comment.

EDIT4: Added <div> wrapper in HTML

document.getElementById("customButton").addEventListener("click", function(){
  document.getElementById("fileUpload").click();  // trigger the click of actual file upload button
});

document.getElementById("fileUpload").addEventListener("change", function(){
  var fullPath = this.value; // fetched value = C:\fakepath\fileName.extension
  var fileName = fullPath.split(/(\\|\/)/g).pop();  // fetch the file name
  document.getElementById("fileName").innerHTML = fileName;  // display the file name
}, false);

#fileUpload{
  display: none; /* do not display the actual file upload button */
}

#customButton{  /* style the fake upload button */
  background: yellow;
  border: 1px solid red;
}

<div>
  <input type="file" id="fileUpload"> <!-- actual file upload button -->
  <button id="customButton">My Custom Button</button>  <!-- fake file upload button which can be used for styling ;) -->
  <span id="fileName"></span>
</div>