1

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.

Rabin Lama Dong
  • 2,017
  • 1
  • 20
  • 29
  • Please read http://stackoverflow.com/help/how-to-ask. Add some examples and edit your question – Nick Roz Jul 26 '16 at 12:52
  • Perhaps, you are looking for [customising file input](http://stackoverflow.com/questions/5813344/how-to-customize-input-type-file) – Nick Roz Jul 26 '16 at 12:52
  • Also have a look at [storing file](http://stackoverflow.com/questions/13655391/storing-the-image-from-an-html-input-file-form-locally) – Nick Roz Jul 26 '16 at 12:54

3 Answers3

1

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)}
Community
  • 1
  • 1
Sam B
  • 80
  • 1
  • 10
0
<?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.

0aslam0
  • 1,357
  • 4
  • 21
  • 39
0

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/

RandomNoobName
  • 79
  • 4