3

I want its structure to remain unchanged, which is still the button and the label that is where the file name is displayed, I want to be able to change the name of the button.

    <input class="form-control" type="file" value="Seleccionar documento">
Spectric
  • 30,714
  • 6
  • 20
  • 43
JuniorXD
  • 33
  • 2
  • Does this answer your question? [How to change the button text of ?](https://stackoverflow.com/questions/1944267/how-to-change-the-button-text-of-input-type-file) – Orifjon Jul 06 '21 at 01:54
  • You can't change the default button. You either change structure or keep default – charlietfl Jul 06 '21 at 01:54
  • What I want is to change the name of the button and that the name of the document appear next to me so that the structure of the input file is not modified – JuniorXD Jul 06 '21 at 02:26

2 Answers2

1

Use a label:

div{
  position:relative;
}
input{
  display:none;
}
<div>
<input class="form-control" type="file" value="Seleccionar documento" id="upload">
<label for="upload"><button onclick="this.parentElement.previousElementSibling.click()">Choose File</button> Select document</label>
</div>

To show file names, we can use JS to add a change event listener to the input field that updates the label:

upload.addEventListener("change", function(){
  document.querySelector('label span').innerText = this.files[0].name;
})
div{
  position:relative;
}
input{
  display:none;
}
<div>
<input class="form-control" type="file" value="Seleccionar documento" id="upload">
<label for="upload"><button onclick="this.parentElement.previousElementSibling.click()">Choose File</button> <span>Select document</span></label>
</div>
Spectric
  • 30,714
  • 6
  • 20
  • 43
0

I think its already been answered try looking at this link : Change default text in input type="file"?

Sample picked from the same source which worked for me:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <button style="display:block;width:120px; height:30px;" onclick="document.getElementById('getFile').click()">Your text here</button>
  <input type='file' id="getFile" style="display:none">
</body>

</html>
Shin McCold
  • 9
  • 1
  • 1