CODEWITHSUNDEEP
htmlcss
uneeb meer
uneeb meer

Reputation: 692

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%;
}

Upvotes: 0

Views: 112

Answers (2)

Luis Carlos
Luis Carlos

Reputation: 365

Another choise could be without using jquery, but pure javascript. This is my solution.

<span id='filename'></span>
<div class="custom-upload">
  <div class="fake-file">
    <input placeholder="Choose File" type="file" name="fileToUpload" id="fileToUpload" />
  </div>
</div>
<script>
    document.getElementById('fileToUpload').addEventListener('change', function() { 
    var dest = document.getElementById('filename');
    dest.innerHTML = document.getElementById('fileToUpload').value;
  });
</script>

I let you the personalization of css of the elements to fit your needs. Hope this help.

Upvotes: 0

Mojtaba
Mojtaba

Reputation: 5004

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>

Upvotes: 2

Related Questions