Drag'n'drop File Upload Plugin For Bootstrap 4 - bs-dropzone.js

File Size: 7.44 KB
Views Total: 3206
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Drag'n'drop File Upload Plugin For Bootstrap 4 - bs-dropzone.js

A jQuery & Bootstrap 4 based dropzone file upload plugin that allows you to select files to upload via drag and drop.

More Features:

  • Works with the native file input.
  • Image preview.
  • Supports multiple files.
  • Allows you to restrict file types.
  • Custom styles.

See Also:

How to use it:

1. Load the necessary jQuery library and Bootstrap 4 framework in the document.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>

2. Load the jQuery bs-dropzone.js plugin's files.

<link rel="stylesheet" href="dist/css/bs-dropzone.min.css" />
<script src="dist/js/bs-dropzone.js"></script>

3. Initialize the plugin on the target file input and done.

<input type="file" name="demo" id="demo" />

4. Enable file preview.


5. Restrict file types in file upload.

  allowed: ['jpg', 'jpeg', 'png', 'bmp', 'webp', 'jfif', 'svg', 'ico', 'gif'],
  accepted: ['jpg', 'jpeg', 'png'],

6. Override the default CSS classes.

  boxClass: 'alert text-center',
  imageClass: 'img-fluid',
  noneColorClass: 'alert-info',
  dragColorClass: 'alert-warning',
  doneColorClass: 'alert-success',
  failColorClass: 'alert-danger',

7. Override the default template.

  dropzoneTemplate: '<div class="bs-dropzone"><div class="bs-dropzone-area"></div><div class="bs-dropzone-message"></div><div class="bs-dropzone-preview"></div></div>',
  parentTemplate: '<div class="row"></div>',
  childTemplate: '<div class="col"></div>',

8. Translate the dropzone into your language.

  language: {
    emptyText: '[Drop File Here or Click To Upload]',
    dragText: '[Drop File Here]',
    dropText: '[_t_ File(s)]'

9. Execute a function as the file input changes.

  change: function (element, files) {
    alert(files.length + ' File(s)');

This awesome jQuery plugin is developed by wilnicho. For more Advanced Usages, please check the demo page or visit the official website.