How to display file name for custom styled input file using jquery?

Question

I have styled a file input using CSS:

.custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer; 
}

<form>
  <label for="file-upload" class="custom-file-upload">
    <i class="fa fa-cloud-upload"></i> Upload Image
  </label>
  <input id="file-upload" name='upload_cont_img' type="file" style="display:none;">
</form>

Everything is working fine, but I’d like to display the selected file name. How is this possible using CSS or jQuery?

If you could put the name attribute in the label - then this could be done with just CSS with the attr() function (generated content can't be added to input elements ). codepen.io/danield770/pen/XpmNYZ?editors=1100#0 — Danield
– Danield, Commented Jan 9, 2017 at 7:48

Mohammad · Accepted Answer · 2019-03-08 09:50:46Z

61

You have to bind and trigger the change event on the [type=file] element and read the files name as:

$('#file-upload').change(function() {
  var i = $(this).prev('label').clone();
  var file = $('#file-upload')[0].files[0].name;
  $(this).prev('label').text(file);
});

.custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <label for="file-upload" class="custom-file-upload">
    <i class="fa fa-cloud-upload"></i> Upload Image
  </label>
  <input id="file-upload" name='upload_cont_img' type="file" style="display:none;">
</form>

edited Mar 8, 2019 at 9:50

Mohammad

21.5k16 gold badges58 silver badges86 bronze badges

answered Jan 9, 2017 at 7:41

Jai

74.8k12 gold badges77 silver badges104 bronze badges

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

3 Comments

amM Over a year ago

@ Jai This is exactly what I wanted. Thanks a lot.

IamCavic Over a year ago

+1 however for me it didn't work with $('#file-upload')[0].files[0].name; but it worked fine with $('#file-upload').files[0].name;

Chris Over a year ago

If your label is after the input then $(this).next('label').text(file);

Mohammad · Accepted Answer · 2018-12-24 06:57:05Z

You need to get name of file when input change and insert it into html. In the code this.files[0].name get name of selected file.

$("#file-upload").change(function(){
  $("#file-name").text(this.files[0].name);
});

$("#file-upload").change(function(){
  $("#file-name").text(this.files[0].name);
});

.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <label for="file-upload" class="custom-file-upload">
        <i class="fa fa-cloud-upload"></i> Upload Image
    </label>
    <input id="file-upload" name='upload_cont_img' type="file" style="display:none;">
    <label id="file-name"></label>
</form>

Also you can do this work using pure javascript

document.querySelector("#file-upload").onchange = function(){
  document.querySelector("#file-name").textContent = this.files[0].name;
}

document.querySelector("#file-upload").onchange = function(){
  document.querySelector("#file-name").textContent = this.files[0].name;
}

.custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer; 
}

<form>
  <label for="file-upload" class="custom-file-upload">
    <i class="fa fa-cloud-upload"></i> Upload Image
  </label>
  <input id="file-upload" name='upload_cont_img' type="file" style="display:none;">
  <label id="file-name"></label>
</form>

Gokul P P · Accepted Answer · 2017-01-09 07:35:44Z

13

You can use this for multiple file upload also

updateList = function() {
  var input = document.getElementById('file');
  var output = document.getElementById('fileList');

  output.innerHTML = '<ul>';
  for (var i = 0; i < input.files.length; ++i) {
    output.innerHTML += '<li>' + input.files.item(i).name + '</li>';
  }
  output.innerHTML += '</ul>';
}

<input type="file" name="file" id="file" multiple 
       onchange="javascript:updateList()" />
<br/>Selected files:
<div id="fileList"></div>

answered Jan 9, 2017 at 7:35

Gokul P P

9609 silver badges29 bronze badges

1 Comment

Samuel Ramzan Over a year ago

Simple, effective and customizable. Thank You for such a simple yet powerful snippet. This one did it for me. (L)

Sharmila · Accepted Answer · 2017-01-09 07:27:31Z

8

You can take the file name like this

$('#file-upload')[0].files[0].name

answered Jan 9, 2017 at 7:27

Sharmila

7954 silver badges11 bronze badges

1 Comment

Mohammad Over a year ago

That is right buy isn't perfect. It only get file name and you should use it when input change and set getted name in htm.

Growyour GK · Accepted Answer · 2020-04-13 08:53:03Z

Since continues update of browser CSS fix is not effective for all browsers please use JavaScript version for above problem solution.

Solution 1

CSS snippets

.wrap-file_upload{position:relative; display:inline-block;}
.wrap-file_upload .btn_colorlayer,.wrap-file_upload:hover .btn_colorlayer{position: absolute; left: 102%; padding-left: 8px; max-width: 120px; white-space: nowrap;text-overflow: ellipsis; overflow: hidden; color:#d7263d;top: 50%; margin-top: -8px; text-transform: none; pointer-events:none; }
.wrap-file_upload input[type="file"]{opacity: 0; height:40px; display: inline; position: absolute; left: 0; top: 0; width: 230px; bottom: 0;}
.wrap-file_upload .btn_lbl{pointer-events: none;}

JavaScript snippets

function _updatename(obj){
    var _parentObj = $(obj).parents("[data-uploadfield]");
    _parentObj.addClass("wrap-file_upload");
    if(!_parentObj.find(".btn_colorlayer").length){
        _parentObj.append("<span class='btn_colorlayer'></span>")
    }
    var _tempname = "";
    if( $(obj).val() != "" && typeof( $(obj).val())!='undefined'){
        _tempname =  $(obj).val().split('\\');
        _tempname = _tempname[_tempname.length-1];
    }

    var _name = _tempname ||  $(obj).parents("[data-uploadfield]").attr("data-uploadfield") || "No file chosen";
    _parentObj.find(".btn_colorlayer").attr("title",_name).text(_name);
}

if($("[data-uploadfield]").length){
    $("[data-uploadfield]").each(function(i){
        _updatename($(this).find("input[type='file']"));
    });
}

$(document).on("click","[data-uploadfield] input[type='file']",function(){
    _updatename($(this));
});

$(document).on("change","[data-uploadfield] input[type='file']",function(){
    _updatename($(this));
});

//  Enable Custom Control for Ajax called pages
$( document ).ajaxComplete(function(event,request,settings){
    if($("[data-uploadfield]").length){
        _updatename("[data-uploadfield] input[type='file']");
    }
});

Solution 2

For CSS Only Solution

.file_upload {
  position: relative;
  min-width: 90px;
  text-align: center;
  color: #ee3333;
  line-height: 25px;
  background: #fff;
  border: solid 2px #ee3333;
  font-weight: 600;
}

a.file_upload {
  display: inline-block;
}

.file_upload .btn_lbl {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.file_upload .btn_colorlayer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 1;
  pointer-events: none;
}

.file_upload input[type="file"] {
  position: absolute;
  top: 3px;
  left: -86px;
  font-weight: 600;
  margin-left: 100%;
  color: #ee3333;
  outline: none;
}

<button class="file_upload" type="button">
      <span class="btn_lbl">Browse</span>
      <span class="btn_colorlayer"></span>
      <input type="file" name="fileupload" id="file_upload" />
    </button>

Hi, I have removed demo link to your site as it might be considered as spam. Your demo can become invalid if the linked page is deleted. So, I have created a working snippet.
it's broken in Chrome too if you use czech language, which is longer in text

Johnwho92 · Accepted Answer · 2017-01-09 07:59:35Z

I've had a long crack i hope it helps you may need to style it more to your liking

HTML

<form>
  <label for="file-upload" class="custom-file-upload">
    <i class="fa fa-cloud-upload"></i> Upload Image
  </label>
  <input id="file-upload" name='upload_cont_img' type="file"     style="display:none;">
  <input id="uploadFile" placeholder="No File" disabled="disabled" />
</form>

CSS

.custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
}

#uploadFile {
  text-align: center;
  border: none;
  background-color: white;
  color: black;
}

JavaScript

document.getElementById("file-upload").onchange = function() {
  document.getElementById("uploadFile").value = this.value;
};

JSFiddle link:https://jsfiddle.net/kd1brhny/

user25775 · Accepted Answer · 2017-01-09 07:34:10Z

0

Upload button Style

input[type="file"] {
    display: none;
}
.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}

<label for="file-upload" class="custom-file-upload">
    <i class="fa fa-cloud-upload"></i> Custom Upload
</label>
<input id="file-upload" type="file"/>

answered Jan 9, 2017 at 7:34

user25775

711 silver badge10 bronze badges

2 Comments

Samuel Ramzan Over a year ago

Excellent Solution!

KittMedia Over a year ago

This doesn’t display the file name whatsoever and thus doesn’t answer the question.

Collectives™ on Stack Overflow

How to display file name for custom styled input file using jquery?

7 Answers 7

3 Comments

Comments

1 Comment

1 Comment

Solution 1

Solution 2

3 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

Comments

1 Comment

1 Comment

Solution 1

Solution 2

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related