skip to Main Content

I have been using the below Snippet for a while now. But when I try to move the same code to Bootstrap 4, The Button size and Input Box size are not aligning.

Bootstrap 3 File Upload Snippet

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<div class="col-md-10">
    <div class="input-group">
        <label class="input-group-btn">
            <span class="btn btn-primary">
                Choose File <input type="file" id="pdf-file" name="pdf_file" style="display: none;">
            </span>
        </label>
        <input type="text" class="form-control" id="pdf-name" placeholder="Select the PDF File" readonly>
    </div>
</div>

Bootstrap 4 File Upload Snippet

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
<div class="col-10">
    <div class="input-group">
        <label class="input-group-btn">
            <span class="btn btn-primary">
                Choose File <input type="file" id="pdf-file" name="pdf_file" style="display: none;">
            </span>
        </label>
        <input type="text" class="form-control" id="pdf-name" placeholder="Select the PDF File" readonly>
    </div>
</div>

Please help me migrate the above code to Bootstrap 4.

2

Answers


  1. you try this way

    $(document).ready( function() {
        	$(document).on('change', '.btn-file :file', function() {
    		var input = $(this),
    			label = input.val().replace(/\/g, '/').replace(/.*//, '');
    		input.trigger('fileselect', [label]);
    		});
    
    		$('.btn-file :file').on('fileselect', function(event, label) {
    		    
    		    var input = $(this).parents('.input-group').find(':text'),
    		        log = label;
    		    
    		    if( input.length ) {
    		        input.val(log);
    		    } else {
    		        if( log ) alert(log);
    		    }
    	    
    		});
    		function readURL(input) {
    		    if (input.files && input.files[0]) {
    		        var reader = new FileReader();
    		        
    		        reader.onload = function (e) {
    		            $('#img-upload').attr('src', e.target.result);
    		        }
    		        
    		        reader.readAsDataURL(input.files[0]);
    		    }
    		}
    
    		$("#imgInp").change(function(){
    		    readURL(this);
    		}); 	
    	});
    .btn-file {
        position: relative;
        overflow: hidden;
    }
    .btn-file input[type=file] {
        position: absolute;
        top: 0;
        right: 0;
        min-width: 100%;
        min-height: 100%;
        font-size: 100px;
        text-align: right;
        filter: alpha(opacity=0);
        opacity: 0;
        outline: none;
        background: white;
        cursor: inherit;
        display: block;
    }
    
    #img-upload{
        width: 100%;
    }
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <!------ Include the above in your HEAD tag ---------->
    
    <div class="container">
    <div class="col-md-6">
        <div class="form-group">
            <label>Upload Image</label>
            <div class="input-group">
                <span class="input-group-btn">
                    <span class="btn btn-default btn-file">
                        Browse… <input type="file" id="imgInp">
                    </span>
                </span>
                <input type="text" class="form-control" readonly>
            </div>
            <img id='img-upload'/>
        </div>
    </div>
    </div>
    Login or Signup to reply.
  2. You could start by looking here
    On another note, Bootstrap 4 has some new great features when it comes to file inputs. You can learn more here

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search