Created
December 29, 2017 03:18
-
-
Save subversivo58/2cb727d878b49f556942100b0931abf2 to your computer and use it in GitHub Desktop.
Bootstrap v4 Beta-2 add filename in custom input file
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * 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); | |
| } | |
| } | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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