Upload input field is essential part of user input in web form. It becomes must when we ask users to provide more data it could be related to him or his work.
When we use input type file it gives us two things one is browse button and space where it shows file name selected by user.
Custom Upload Problem
Behavior of different browsers for file input is totally different which impact the design theme of web form and like other controls we can’t customize file input control according to theme. designers use wrapper to around the input control and change the look and feel of file input. Which make it similar to all available browsers. Putting wrapper around the file input hide it’s feature of showing file name selected by user.
Here we are providing the solution for this issue.
JavaScript solution
To display selected file name developers prefer to write jQuery or JavaScript code which display file name in another HTML tag as descriptive below.
HTML Structure
<a class="file_upload" href="javascript:void(0)" onclick="$('#pro-image').click()" class="label">Upload Doc</a>
<input type="file" id="pro-image" name="files" style="display: none;" class="form-control btn-sm" onchange="getname(this)" multiple />
<span class="preview-images-zone"></span>
In above HTML structure we have use anchor tag to show our upload button and hide our file upload field. On anchor button action click event of hidden upload field, this will open browse window.
Then script function getname(this) will populate scripted the selected file name in span tag. Script code for getname function is given below. Use your custom CSS to decorate anchor button.
JavaScript Function
function getname(obj){
var _v = obj.value;
var _klist = _v.split(".");;
var extn = _klist[_klist.length-1];
if(extn == "doc" || extn == "docx" || extn == "jpg" || extn == "png" || extn == "gif" || extn == "pdf"){
var _url = _v.split("\\");;
var name = _url[_url.length-1];
console.log(name);
$(".preview-images-zone").text(name);
}else{
alert("File not supported.");
$(obj).val("");
}
}
CSS only solution
In role of UI Developer, I prefer to use CSS over script as it improve our page performance. Here I have created same functionality using CSS only.
Related Links: Equal Height column issue | Resolved
HTML Code
<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>
CSS Code
.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;}
Don’t forget to share if you like it.