The file input feature by Bootstrap and Jasny allows you to create a visually appealing file or image input widgets based on the Bootstrap style. Additional dropzone.js library gives you drag’n’drop file uploads option.

HTML markup code for abowe example:

<div class="custom-file"> <input id="logo" type="file" class="custom-file-input"> <label for="logo" class="custom-file-label">Choose file...</label> </div>

Javascript code for abowe example:

$('.custom-file-input').on('change', function() { let fileName = $(this).val().split('\\').pop(); $(this).next('.custom-file-label').addClass("selected").html(fileName); });

HTML markup code for abowe example:

<div class="fileinput fileinput-new" data-provides="fileinput"> <span class="btn btn-default btn-file"><span class="fileinput-new">Select file</span> <span class="fileinput-exists">Change</span><input type="file" name="..."/></span> <span class="fileinput-filename"></span> <a href="#" class="close fileinput-exists" data-dismiss="fileinput" style="float: none">×</a> </div>

Dropzone.js is a light weight JavaScript library that turns an HTML element into a dropzone. This means that a user can drag and drop a file onto it, and the file gets uploaded to the server via AJAX.

HTML markup code for abowe example:

<form action="#" class="dropzone" id="dropzoneForm"> <div class="fallback"> <input name="file" type="file" multiple /> </div> </form>

All avalible options and full documentation you can find: http://www.dropzonejs.com/#configuration-options