uneeb meer uneeb meer - 3 months ago 14
HTML Question

show name of file on custom input field

i am using a custom file input on an upload page on my website and it is working as per my requirement the only issue is i have hidden the default layout of filetype="input" but i want to show the name of the file being uploaded so that the user may know which file he has uploadedand the name of the file here's the fiddle

JsFiddle

here's the html and css

<div class="custom-upload">
<div class="fake-file">
<input placeholder="Choose File" type="file" name="fileToUpload" id="fileToUpload" />
</div>
</div>

.custom-upload {
position: relative;
height: 40px;
width: 100%;
margin-top: 20px;
border-bottom: 1px solid #625f5b;
}

.custom-upload input[type=file]
{
outline:none;
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
width:100%;
height:100%;

}

.custom-upload .fake-file
{
background:url(https://s4.postimg.org/hy3g354ot/upload.png) center right no-repeat;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
padding: 0;
margin: 0;
z-index: 1;
line-height: 100%;
}

.custom-upload .fake-file input
{
font-size:16px;
height:40px;
width: 100%;
}

Answer

Look at the JavaScript I added.

Note: I used jQuery. If you are using native JavaScript, I have to change the code

$(function(){
  $("#fileToUpload").on('change',function(){
    fpath = $(this).val();
    $('#filePath').html('<b>You selected the file:</b> ' + fpath);
  });
});
.custom-upload {
    position: relative;
    height: 40px;
    width: 100%;
    margin-top: 20px;
    border-bottom: 1px solid #625f5b;
}

.custom-upload input[type=file]
{
    outline:none;
    position: relative;
    text-align: right;
    -moz-opacity:0 ;
    filter:alpha(opacity: 0);
    opacity: 0;
    z-index: 2;
    width:100%;
    height:100%;

}

.custom-upload .fake-file
{
    background:url(https://s4.postimg.org/hy3g354ot/upload.png) center right no-repeat;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    padding: 0;
    margin: 0;
    z-index: 1;
    line-height: 100%;
}

.custom-upload .fake-file input
{
    font-size:16px;
    height:40px;
    width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-upload">
  <div class="fake-file">
    <input placeholder="Choose File" type="file" name="fileToUpload" id="fileToUpload" />
  </div>
  <div id="filePath">
  
  </div>
</div>