show name of file on custom input field

Question

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

Do you mean you have a hidden input and want to put the name of the file as value? — Mojtaba
– Mojtaba, Commented Aug 24, 2016 at 15:41
exactly! the type="file" is hidden because i dont want to show that creepy choose file button but i still want the name to be displayed as value — uneeb meer
– uneeb meer, Commented Aug 24, 2016 at 15:44

Mojtaba · Accepted Answer · 2016-08-24 15:47:30Z

2

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>

answered Aug 24, 2016 at 15:47

Mojtaba

5,0175 gold badges24 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mojtaba Over a year ago

@uneebmeer, (thumbsup)

Luis Carlos · Accepted Answer · 2016-08-24 16:07:38Z

0

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.

answered Aug 24, 2016 at 16:07

Luis Carlos

4056 silver badges11 bronze badges

Collectives™ on Stack Overflow

show name of file on custom input field

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related