Rename button from default library

Question

Does anyone know how to change the name of the button 'Select file' and 'No file selected' that appears in the following image?

It seems that it is a button that comes by default from googleapis.com. I cannot change the name to English, could you help me? Thank you.

Is there the same button but in English?

This is the code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<form method="post" enctype="multipart/form-data">
    <div align="center">
        <label class="selectCSV">Select the CSV file:</label>
        <input type="file" name="file" />
        <br/><br/>
        <input type="submit" name="submit_exercises" value="Import" class="btn btn-info" />
    </div>
</form>
</body>
</html>

Possible duplicate of [Labeling file upload button](https://stackoverflow.com/questions/686905/labeling-file-upload-button) — ficuscr, Jun 04 '19 at 19:16
I think what you are talking about is the [`file` input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file). See also: https://stackoverflow.com/questions/572768/styling-an-input-type-file-button — ficuscr, Jun 04 '19 at 19:28
You cannot change the text. You will have to use JS / jQuery to accomplish it — rpm192, Jun 07 '19 at 20:05

rpm192 · Accepted Answer · 2019-06-05T19:22:55.417

If I'm correct, the text on and next to the button depends on the language of the browser and the browser itself. The text cannot be changed.

However, by utilising JS and some CSS, you can hide the original button, add your own and 'redirect' the click on the fake button to the actual file input.

The snippet below utilizes vanilla JavaScript and does not show the name of the file.

document.getElementById('fakeButton').addEventListener('click', redirectToFileInput);

function redirectToFileInput () {
  document.getElementById('fileInput').click();
}

#fileInput {
  display:none;
}

<input type="file" id="fileInput" name="file">

<input type="button" id="fakeButton" value="YourText">

The snippet below utilizes jQuery and shows the filename after selecting it in the upload window.

$(document).on('click', '#fakeButton', function(event) { 
    event.preventDefault(); 
    $("#fileInput").click(); 
});

$("#fileInput").change(function(){
  $("#fileName").text(" " + $('input[type=file]')[0].files[0].name);
});

#fileInput {
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" id="fileInput" name="file">

<input type="button" id="fakeButton" value="YourText"><span id="fileName"> No file uploaded.</span>

Edit: Cleaner solution for the vanilla javascript answer.

#fileInput {
  display:none;
}

<input type="file" id="fileInput" name="file">

<input type="button" id="fakeButton" value="YourText" onclick="document.getElementById('fileInput').click();">

Rename button from default library

1 Answers1