Drag and Drop File Upload Plugin for Bootstrap 4 | bs-dropzone.js

drag-and-drop-file-upload-bootstrap

bs-dropzone.js is an extension for jQueryand Bootstrap that allows you to visually convert files <input type="file">into element into an element that allows drag-and-drop gestures within a zone, is fully customizable and allows a function call to be made when the change event is executed.

what do I need?

A modern browser and both jQuery and Bootstrap dependencies in the corresponding versions.

drag and drop file upload jquery, drag and drop file upload bootstrap, drag and drop file upload javascript, bootstrap drag and drop file upload plugin, html5 drag and drop file upload jquery

More advantages:

  • Works with the original file input
  • Preview the image
  • Supports multiple files
  • Allows you to restrict file types
  • Custom patterns

How to make use of it:

1. Load the mandatory jQuery library and Bootstrap 4 framework within the doc.

<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 information.

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

3. Initialize the plugin on the goal file input and performed.

<input type="file" name="demo" id="demo" />
$(function(){
  $('#demo').bs_dropzone();
});

4. Enable file preview.

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

5. Restrict file sorts in the 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 because of the file input adjustments.

$('#demo').bs_dropzone({
  change: function (element, files) {
    alert(files.length + ' File(s)');
  }
});

Drag’n’drop File Upload Plugin For Bootstrap 4, bs-dropzone.js Plugin/Github, drag and drop file upload with submit button


See Demo And Download

Official Website(wilnicho): Click Here

This superior jQuery/javascript plugin is developed by wilnicho. For extra Advanced Usage, please go to the official website.

Share