Change default text in input type="file"?

Question

I want to change default text on button that is "Choose File" when we use input="file".

How can I do this? Also as you can see in image button is on left side of text. How can I put it on right side of text?

Answer 1

Use "for" attribute of label for input.

<div>
  <label for="files" class="btn">Select Image</label>
  <input id="files" style="visibility:hidden;" type="file">
</div>

Below is the code to fetch name of the uploaded file

---

$("#files").change(function() {
  filename = this.files[0].name
  console.log(filename);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
      <label for="files" class="btn">Select Image</label>
      <input id="files" style="visibility:hidden;" type="file">
    </div>