"Click to add"
Bootstrap 4.1.1 Snippet by niranjankmr707

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <div class="container"> <div class="form-group row custom-upload"> <div class="col-md-12"> <div data-role="appendRow"> <div class="form-inline form-row"> <input input type="text" class="form-control mb-2 mr-sm-2 col-sm-4" id="field-name" placeholder="Enter...."> <!-- file upload start--> <div class="mb-2 mr-sm-2 col-sm-5 wrap-input-container"> <label class="custom-file-upload form-control"> <i class="fa fa-cloud-upload"></i> Upload Docs </label> <input class="file-upload" name="file_name" type="file"> </div> <!-- file upload ends--> <button class="btn btn-sm btn-danger mb-2" data-role="remove"> <i class="fa fa-minus"></i> </button> <button class="btn btn-sm btn-primary mb-2" data-role="add"> <i class="fa fa-plus"></i> </button> </div> <!-- /div.form-inline --> </div> <!-- /div[data-role="dynamic-fields"] --> </div> </div> </div>
/* @import url('https://fonts.googleapis.com/css?family=Open+Sans'); font-family: 'Open Sans', sans-serif; */ @import url('https://fonts.googleapis.com/css?family=Open+Sans'); html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { overflow-x:hidden; font-family: 'Open Sans', sans-serif; position:relative; } .custom-upload { margin-top:20px;} section { padding: 60px 0; overflow-y: auto !important; } section .section-title { text-align: center; color: #007b5e; margin-bottom: 50px; text-transform: uppercase; } .btn {margin-right:10px;} a { -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; font-family: 'Open Sans', sans-serif; color: #000; } a:hover { -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; color: #000; text-decoration: none; } h1,h2,h3,h4,h5{ font-family: 'Open Sans', sans-serif; } p, ul,li{ font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 25px; } .form-inline .form-control.custom-file-upload { border: 1px solid #ccc; padding: 6px 12px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; } .wrap-input-container { display: inline-block; position: relative; overflow: hidden; } .wrap-input-container input { position: absolute; font-size: 400px; opacity: 0; z-index: 1; top: 0; left: 0; }
// Dynamically add-on fields $(function() { // Remove button click $(document).on( 'click', '[data-role="appendRow"] > .form-inline [data-role="remove"]', function(e) { e.preventDefault(); $(this).closest('.form-row').remove(); } ); // Add button click $(document).on( 'click', '[data-role="appendRow"] > .form-row [data-role="add"]', function(e) { e.preventDefault(); var container = $(this).closest('[data-role="appendRow"]'); new_field_group = container.children().filter('.form-row:first-child').clone(); new_field_group.find('label').html('Upload Document'); new_field_group.find('input').each(function(){ $(this).val(''); }); container.append(new_field_group); } ); }); // file upload $(document).on('change', '.file-upload', function(){ var i = $(this).prev('label').clone(); var file = this.files[0].name; $(this).prev('label').text(file); });

Related: See More


Questions / Comments: