CODEWITHSUNDEEP
javascriptphphtml
Rabin Lama Dong
Rabin Lama Dong

Reputation: 2476

How to change the text "no file selected" next to the "Browse" button in html file type attribute?

We all are familiar to the file attribute of html. In the browser, we see a button with text "browse" and "no file selected" text near it.

How do I edit the text "no file selected" near to the browse button?
Actually, what I want to do is, a user opens the form, uploads and submits a file through that input and the file gets stored in the database. After the page is refreshed when the user opens the same form, the name of the previously uploaded file should be shown instead of "no file selected". How do I do that. Searched a lot but got nothing and I don't have any idea about it so haven't tried anything. Any help would be appreciated. Thanks in advance.

Upvotes: 1

Views: 4646

Answers (3)

RandomNoobName
RandomNoobName

Reputation: 81

This is awesome demo maybe it helps http://tympanus.net/Tutorials/CustomFileInputs/ and there is explanation http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/

Upvotes: 0

Sam B
Sam B

Reputation: 80

https://stackoverflow.com/a/7691323/6588826 Maybe this can help you

You can try a working example here: http://jsfiddle.net/VQJ9V/307/ (Tested in FF 7, IE 9, Safari 5, Opera 11 and Chrome 14)

HTML

<div class="inputWrapper">
<input class="fileInput" type="file" name="file1"/>

CSS:

.inputWrapper {
height: 32px;
width: 64px;
overflow: hidden;
position: relative;
cursor: pointer;
/*Using a background color, but you can use a background image to represent a button*/
background-color: #DDF;}
.fileInput {
cursor: pointer;
height: 100%;
position:absolute;
top: 0;
right: 0;
z-index: 99;
/*This makes the button huge. If you want a bigger button, increase the font size*/
font-size:50px;
/*Opacity settings for all browsers*/
opacity: 0;
-moz-opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)}

Upvotes: 1

0aslam0
0aslam0

Reputation: 1963

<?php
    /* Connect to DB and read the file name */
    $filename = .....;
?>

<input type='text' id='BrowseTextField' />

<script type="text/javascript">
    var filename = '<?php echo $filename; ?>';
    document.getElementById('BrowseTextField').value=filename; 
</script>

This would be one method. Connect to DB, read the filename stored by the user (hoping that user is signed in and you have a session). Then set that value to the textfield using javascript.

Upvotes: 0

Related Questions