<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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.7/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css"/> <div class="container"> <div class="row"> <div class="col-lg-8 col-sm-12 col-11 main-section"> <h1 class="text-center text-danger">File Input Example</h1><br> <form enctype="multipart/form-data"> <div class="form-group"> <div class="file-loading"> <input id="file-1" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="2"> </div> </div> </form> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.7/js/fileinput.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.7/themes/fa/theme.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" type="text/javascript"></script>

.main-section{ margin:0 auto; padding: 20px; margin-top: 100px; background-color: #fff; box-shadow: 0px 0px 20px #c1c1c1; } .fileinput-remove, .fileinput-upload{ display: none; }

$("#file-1").fileinput({ theme: 'fa', uploadUrl: '#', allowedFileExtensions: ['jpg', 'png', 'gif'], overwriteInitial: false, maxFileSize:2000, maxFilesNum: 10, slugCallback: function (filename) { return filename.replace('(', '_').replace(']', '_'); } });