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:

• Advanced Drag'n'drop File Uploader - jQuery 5x5jqpi.js
• Drag and Drop File Uploader Plugin - dropzone
• Drag And Drop File Upload Plugin For Bootstrap - dropzone
• Drag And Drop Multi-file Upload Plugin - jQuery file-dropzone
• 10 Best File Upload Libraries In jQuery And Vanilla JavaScript

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" />

$(function(){
  $('#demo').bs_dropzone();
});

4. Enable file preview.

$(function(){
  $('#demo').bs_dropzone();
});

5. Restrict file types in file upload.

$('#demo').bs_dropzone({
  allowed: ['jpg', 'jpeg', 'png', 'bmp', 'webp', 'jfif', 'svg', 'ico', 'gif'],
  accepted: ['jpg', 'jpeg', 'png'],
});

6. Override the default CSS classes.

$('#demo').bs_dropzone({
  boxClass: 'alert text-center',
  imageClass: 'img-fluid',
  noneColorClass: 'alert-info',
  dragColorClass: 'alert-warning',
  doneColorClass: 'alert-success',
  failColorClass: 'alert-danger',
});

7. Override the default template.

$('#demo').bs_dropzone({
  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.

$('#demo').bs_dropzone({
  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.

$('#demo').bs_dropzone({
  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.