<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"row"> <br> <br> <br> <br> </div> <div class="container center"> <input id="file-4" name="file-4[]" type="file" multiple> <hr> <button class="btn btn-default btn-disable" type="button">Disable</button> <button class="btn btn-danger btn-destroy" type="button">Destroy</button> <button class="btn btn-success btn-recreate" type="button">Recreate</button> <button class="btn btn-info btn-refresh" type="button">Refresh</button> </div> <script> $(document).on('ready', function() { // the file input var $el = $('#file-4'), initPlugin = function() { $el.fileinput({ uploadUrl: '/file-upload-single/1', uploadExtraData: {kvId: '10'}, dropZoneEnabled: false, }).off('filepreupload').on('filepreupload', function() { alert("Initial pre-upload message!"); }); }; // initialize plugin initPlugin(); // `disable` and `enable` methods $(".btn-disable").on('click', function() { var $btn = $(this); if (!$el.data('fileinput')) { initPlugin(); $el.trigger('change'); } if ($el.attr('disabled')) { $el.fileinput('enable'); $btn.html('Disable').removeClass('btn-primary').addClass('btn-default'); } else { $el.fileinput('disable'); $btn.html('Enable').removeClass('btn-default').addClass('btn-primary'); } }); // `destroy` method $(".btn-destroy").on('click', function() { if ($el.data('fileinput')) { $el.fileinput('destroy'); } }); // recreate plugin after destroy $(".btn-recreate").on('click', function() { if ($el.data('fileinput')) { return; } initPlugin(); if ($el.val()) { $el.trigger('change'); } }); // refresh plugin with new options $(".btn-refresh").on('click', function() { $el.fileinput('refresh', {previewClass:'bg-info'}) .off('fileuploaded').on('fileuploaded', function(){ alert("An additional upload completion message (only received after plugin refresh)."); }); }); }); </script>

center { align-content: center; align-items: center; } down { padding-bottom: 30px; }