Created
August 31, 2016 10:40
-
-
Save lafeber/4d20f6a2d394d572d9b1dbbe060e378a to your computer and use it in GitHub Desktop.
basic simple_form input preview
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
| .container{ | |
| margin-top:20px; | |
| } | |
| .image-preview-input { | |
| position: relative; | |
| overflow: hidden; | |
| margin: 0px; | |
| color: #333; | |
| background-color: #fff; | |
| border-color: #ccc; | |
| } | |
| .image-preview-input input[type=file] { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| margin: 0; | |
| padding: 0; | |
| font-size: 20px; | |
| cursor: pointer; | |
| opacity: 0; | |
| filter: alpha(opacity=0); | |
| } | |
| .image-preview-input-title { | |
| margin-left:2px; | |
| } |
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
| <!-- TODO: Add simple_form input_preview based on html below --> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-xs-12 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2"> | |
| <!-- image-preview-filename input [CUT FROM HERE]--> | |
| <div class="input-group image-preview"> | |
| <input type="text" class="form-control image-preview-filename" disabled="disabled"> <!-- don't give a name === doesn't send on POST/GET --> | |
| <span class="input-group-btn"> | |
| <!-- image-preview-clear button --> | |
| <button type="button" class="btn btn-default image-preview-clear" style="display:none;"> | |
| <span class="glyphicon glyphicon-remove"></span> Clear | |
| </button> | |
| <!-- image-preview-input --> | |
| <div class="btn btn-default image-preview-input"> | |
| <span class="glyphicon glyphicon-folder-open"></span> | |
| <span class="image-preview-input-title">Browse</span> | |
| <input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview"/> <!-- rename it --> | |
| </div> | |
| </span> | |
| </div><!-- /input-group image-preview [TO HERE]--> | |
| </div> | |
| </div> | |
| </div> |
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
| $(document).on('click', '#close-preview', function(){ | |
| $('.image-preview').popover('hide'); | |
| // Hover befor close the preview | |
| $('.image-preview').hover( | |
| function () { | |
| $('.image-preview').popover('show'); | |
| }, | |
| function () { | |
| $('.image-preview').popover('hide'); | |
| } | |
| ); | |
| }); | |
| $(function() { | |
| // Create the close button | |
| var closebtn = $('<button/>', { | |
| type:"button", | |
| text: 'x', | |
| id: 'close-preview', | |
| style: 'font-size: initial;', | |
| }); | |
| closebtn.attr("class","close pull-right"); | |
| // Set the popover default content | |
| $('.image-preview').popover({ | |
| trigger:'manual', | |
| html:true, | |
| title: "<strong>Preview</strong>"+$(closebtn)[0].outerHTML, | |
| content: "There's no image", | |
| placement:'bottom' | |
| }); | |
| // Clear event | |
| $('.image-preview-clear').click(function(){ | |
| $('.image-preview').attr("data-content","").popover('hide'); | |
| $('.image-preview-filename').val(""); | |
| $('.image-preview-clear').hide(); | |
| $('.image-preview-input input:file').val(""); | |
| $(".image-preview-input-title").text("Browse"); | |
| }); | |
| // Create the preview image | |
| $(".image-preview-input input:file").change(function (){ | |
| var img = $('<img/>', { | |
| id: 'dynamic', | |
| width:250, | |
| height:200 | |
| }); | |
| var file = this.files[0]; | |
| var reader = new FileReader(); | |
| // Set preview image into the popover data-content | |
| reader.onload = function (e) { | |
| $(".image-preview-input-title").text("Change"); | |
| $(".image-preview-clear").show(); | |
| $(".image-preview-filename").val(file.name); | |
| img.attr('src', e.target.result); | |
| $(".image-preview").attr("data-content",$(img)[0].outerHTML).popover("show"); | |
| } | |
| reader.readAsDataURL(file); | |
| }); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment