Asp:Fileupload Edit "No File Selected" Message

Asp:FileUpload edit No file selected message

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.

File Upload keeps showing 'No File Chosen'

So. Looks like this is a bug that was added in the last update of the component.

To work around this issue I set the CSS of the file to white and added the file name below the button in the LoadFile function that is called. It's a hacky way but atm I don't see any other way around it until the component has been updated/ fixed.

CSS:

input[type='file'] {
    color: transparent;
}

Global variable in the component:

private string FileName = "";

The change in the LoadFile function:

FileName = string.Concat("File: ",files.FirstOrDefault().Name);

Hide error message No File Chosen text for asp:fileUpload

See the code below:-

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

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");})

Hope it helps

Change the No file chosen:

I'm pretty sure you cannot change the default labels on buttons, they are hard-coded in browsers (each browser rendering the buttons captions its own way). Check out this button styling article

asp:FileUpload control not getting file value when using fake input

Nothing jumps out to me immediately. I'd suggest:

First, comment out your JavaScript. Does the FileUpload control work when you are not modifying the underlying HTML markup first? If so, take a closer look at these 2 lines in your JavaScript:

var wrapper = $('#<%=fuPicture.ClientID%>').css({ height: 0, width: 0, 'overflow': 'hidden' });
var fileInput = $('#<%=fuPicture.ClientID%>').wrap(wrapper);

Perhaps the culprit lies in trying to hide that value in the markup.

How can I remove the No file chosen tooltip from a file input in Chrome?

This is a native part of the webkit browsers and you cannot remove it. You should think about a hacky solution like covering or hiding the file inputs.

A hacky solution:

input[type='file'] {
  opacity:0    
}

<div>
    <input type='file'/>
    <span id='val'></span>
    <span id='button'>Select File</span>
</div>   

$('#button').click(function(){
   $("input[type='file']").trigger('click');
})

$("input[type='file']").change(function(){
   $('#val').text(this.value.replace(/C:\\fakepath\\/i, ''))
})    

Fiddle

---

Related Topics