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

Answer 1

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("")
    }
    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;
}

      Browse