The file input feature by Bootstrap allows you to create a visually appealing file or image input widgets based on the Bootstrap style (https://www.npmjs.com/package/bs-custom-file-input) Additional dropzone.js library gives you drag’n’drop file uploads option.

HTML markup code for abowe example:

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

Javascript code for abowe example:

$(document).ready(function () { bsCustomFileInput.init() })

HTML markup code for abowe example:

<div class="input-group"> <div class="custom-file"> <input id="inputGroupFile02" type="file" multiple class="custom-file-input"> <label class="custom-file-label" for="inputGroupFile02">Choose several files</label> </div> </div>

Javascript code for abowe example:

$(document).ready(function () { bsCustomFileInput.init() })

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