Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Bootstrap v4 Beta-2 add filename in custom input file
.custom-file,
.custom-file-control,
.custom-file-input {
height: 2.3rem!important;
}
/* add FontAwesome icon for input (optional) */
.custom-file-control::before {
font-family: 'FontAwesome';
content: "\f03e"!important;
height: 2.3rem!important;
padding: .4rem 1rem!important;
border-radius: 0!important;
}
.custom-file-name:after {
content: attr(data-content) !important;
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
padding: 0.35rem .5rem;
}
/**
* Bootstrap v4 Beta-2 add filename in custom input file dinamic and restore default "fake placeholder" in "Event.RESET"
* Based on this issue: @see {https://github.com/twbs/bootstrap/issues/20813} - original as jQuery
*/
let customInputs = document.querySelectorAll('input[type="file"][data-toggle="custom-file"]');
if ( customInputs.length > 0 ) {
for (let i = 0; i < customInputs.length; i++) {
let input = customInputs[i];
if ( input.hasAttribute('data-target') ) {
// only accept "id" (don't accept "class")
let targetid = input.getAttribute('data-target');
let target = document.getElementById(targetid);
if ( !target || !target.getAttribute('data-content') ) {
// next...
continue;
} else {
if ( !target.getAttribute('data-original-content') ) {
target.setAttribute('data-original-content', target.getAttribute('data-content'));
}
// handler Event (per input)
input.addEventListener('change', function(evt) {
// remark variables by "this" input refer
targetid = this.getAttribute('data-target');
target = document.getElementById(targetid);
// get file name
let filename = evt.target.files[0].name;
if ( !filename || filename === '' ) {
filename = target.getAttribute('data-original-content');
}
target.setAttribute('data-content', filename);
// trigger "Event.RESET" by form
this.form.addEventListener('reset', function() {
target.setAttribute('data-content', target.getAttribute('data-original-content'));
}, false);
}, false);
}
}
}
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Upload Form</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
</head>
<body>
<form method="post" action="/upload" enctype="multipart/form-data" accept-charset="utf-8">
<div class="form-row">
<div class="form-group">
<label>Image:</label>
<label class="custom-file">
<input id="image-input" data-toggle="custom-file" data-target="image-upload" type="file" accept="image/*" class="custom-file-input">
<span id="image-upload" class="custom-file-control custom-file-name rounded-0" data-content="Choose picture"></span>
</label>
</div>
</div>
</form>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.