How to display file name for custom styled input file using jquery?
114,998
Solution 1
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>
Solution 2
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>
Solution 3
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>
Solution 4
You can take the file name like this
$('#file-upload')[0].files[0].name
Solution 5
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>
Related videos on Youtube
Author by
amM
Updated on July 09, 2022Comments
-
amM almost 2 years
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?
-
Mohammad over 7 yearsThat 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.
-
amM over 7 years@ Jai This is exactly what I wanted. Thanks a lot.
-
IamCavic about 6 years+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;
-
Samuel Ramzan over 5 yearsExcellent Solution!
-
adiga over 5 yearsHi, 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.
-
ceving over 4 yearsLooks completely broken in FF on Linux.
-
KittMedia about 4 yearsThis doesn’t display the file name whatsoever and thus doesn’t answer the question.
-
Martin Zvarík about 4 yearsit's broken in Chrome too if you use czech language, which is longer in text
-
Samuel Ramzan about 3 yearsSimple, effective and customizable. Thank You for such a simple yet powerful snippet. This one did it for me. (L)
-
Chris about 3 yearsIf your label is after the input then $(this).next('label').text(file);