Change the "No file chosen":

html button file-upload pug
FranXh picture FranXh · Apr 14, 2013 · Viewed 245.6k times · Source

I have a button "Choose file" as follows (I am using Jade but it should be the same as Html5):

 input(type='file', name='videoFile')

In the browser this shows a button with a text next to it "No file chosen". I would like to change the "No file chosen" text to something else, like "No video chosen" or "Choose a video please". I followed the first suggestions here:

I don't want to see 'no file chosen' for a file input field

But doing this did not change the text:

 input(type='file', name='videoFile', title = "Choose a video please")

Can anybody help me figure out where the problem is?

Answer

SKManX picture SKManX · Jul 30, 2013

Hide the input with css, add a label and assign it to input button. label will be clickable and when clicked, it will fire up the file dialog.

<input type="file" id="files" class="hidden"/>
<label for="files">Select file</label>

Then style the label as a button if you want.

Related questions

trying to align html button at the center of the my page

I'm trying to align an HTML button exactly at the centre of the page irrespective of the browser used. It is either floating to the left while still being at the vertical centre or being somewhere on the page like …

Read More
How to make an input type=button act like a hyperlink and redirect using a get request?

How do I make a <input type=button> act like a hyperlink and redirect using a GET request?

Read More
How to center buttons in Twitter Bootstrap 3?

I am building a form in Twitter Bootstrap but I'm having issues with centering the button below the input in the form. I have already tried applying the center-block class to the button but that didn't work. How should I …

Read More