Asp:FileUpload edit "No file selected" message

Question

I just need to know if there's a way to change the message shown by the Asp:FileUpload when no file as been selected.

This message

Thanks.

possible duplicate of http://stackoverflow.com/questions/17469844/change-default-button-label-of-pfileupload-mode-simple — Chandan Kumar, Nov 25 '13 at 19:28

Chandan Kumar · Answer 1 · 2013-11-27T02:24:09.977

http://jsfiddle.net/ZDgRG/

See above link. I use css to hide the default text and use a label to show what I want:

html

<div>
      <input type='file' title="Choose a video please" id="aa" onchange="pressed()">
      <label id="fileLabel">Choose file</label>
</div>

css

input[type=file]{
    width:90px;
    color:transparent;
}

javascript

window.pressed = function(){
    var a = document.getElementById('aa');
    if(a.value == "")
    {
        fileLabel.innerHTML = "Choose file";
    }
    else
    {
        var theSplit = a.value.split('\\');
        fileLabel.innerHTML = theSplit[theSplit.length-1];
    }
 };

score 4 · Accepted Answer · answered Nov 25 '13 at 19:38

You replace the text with your own message using CSS pseduo-class :after. You can declare a class like this one:

.bar:after {
    content:"Please select a file";
    background-color:white;
}

And assign it to your FileUpload control. The content message will replace the original one. Of course upon file selection you need to remove the message, you can do this for example via jQuery .removeClass (assuming ID of your FileUpload is "foo"):

$('#foo').change(function() {
    $(this).removeClass("bar");
})

Demo: http://jsfiddle.net/5zhuL/2/

Note that this solution seems to work Webkit-browser's only (Chrome, Opera, Safari) you may need an alternative for others.

score 1 · Answer 3 · answered Nov 25 '13 at 19:25

1

Nope, not possible. This is the standard rendering in Chrome and cannot be changed.

answered Nov 25 '13 at 19:25

HaukurHaf

13,522
5
44
59

score 1 · Answer 4 · answered Nov 25 '13 at 19:25

1

If you visit your page source in your browser ASP.NET put an input element with type='file' instead of your FileUpload. You could simply use CSS to cover the text with something when the value attribute is empty.

answered Nov 25 '13 at 19:25

Saman Gholami

3,416
7
30
71

score 0 · Answer 5 · answered Apr 14 '15 at 10:55

0

Only add this CSS to your code. It simply hide the "No file chosen".

<style>
 input[type=file]
{
width:90px;
color:transparent;
}

</style>

answered Apr 14 '15 at 10:55

Santhosh Legent

147
11

score 0 · Answer 6 · answered May 28 '15 at 17:29

0

http://jsfiddle.net/Lsgbx5ne/1/

input[type=file]{
  color:transparent;
}
input[type=file]:after {
  color: #000;
  content:" Cool!";
}

Improvements over other solutions:

Works for short text
Doesn't change the background color
Pure css

answered May 28 '15 at 17:29

montrealmike

11,433
10
64
86

score 0 · Answer 7 · answered Mar 30 '16 at 15:33

This work in all browser

window.pressed = function(){
    var a = document.getElementById('aa');
    if(!(a.value == ""))
    {
        var theSplit = a.value.split('\\');
        fileLabel.innerHTML = theSplit[theSplit.length-1];
    }
};

input[type=file]{
    width:90px;
    color:transparent;
}

<div>
<input type='file' title="Choose a video please" id="aa" onchange="pressed()">
<label id="fileLabel">Choose file</label>
</div>

Asp:FileUpload edit "No file selected" message

7 Answers7

Linked