Angular Dropzone

Pro Component

Dropzone JS is an open-source library that provides drag’n’ drop file uploads with image previews. It is lightweight, doesn’t depend on any other library (like jQuery) and is highly customisable. Dropzone JS supports image previews and shows nice progress bars.
Keep reading our Angular Dropzone JS examples and learn how to use this plugin.

Usage

Typescript

In order to use this plugin on your project you will need to include the following import into the component where you use it:

import Dropzone from "dropzone";
Dropzone.autoDiscover = false;

Examples

Copy any of the code examples below and paste it in your project after you integrated the needed resources.

Single file

Choose file

<div class="dropzone dropzone-single" data-toggle="dropzone" data-dropzone-url="http://">
  <div class="fallback">
    <div class="custom-file">
      <input type="file" class="custom-file-input" id="dropzoneBasicUpload" />
      <label class="custom-file-label" for="dropzoneBasicUpload">Choose file</label>
    </div>
  </div>
  <div class="dz-preview dz-preview-single">
    <div class="dz-preview-cover">
      <img class="dz-preview-img" src="..." alt="..." data-dz-thumbnail="" />
    </div>
  </div>
</div>

<!-- Typescript -->

let currentSingleFile = undefined;
// single dropzone file - accepts only images
new Dropzone(document.getElementsByClassName("dropzone-single")[0], {
  url: "/",
  thumbnailWidth: null,
  thumbnailHeight: null,
  previewsContainer: document.getElementsByClassName(
    "dz-preview-single"
  )[0],
  previewTemplate: document.getElementsByClassName("dz-preview-single")[0]
    .innerHTML,
  maxFiles: 1,
  acceptedFiles: "image/*",
  init: function() {
    this.on("addedfile", function(file) {
      if (currentSingleFile) {
        this.removeFile(currentSingleFile);
      }
      currentSingleFile = file;
    });
  }
});
document.getElementsByClassName("dz-preview-single")[0].innerHTML = "";

Multiple files

Choose file

...

...

Remove

<div
    class=" dropzone dropzone-multiple"
    id="dropzone-multiple"
  >
    <div class=" fallback">
      <div class=" custom-file">
        <input
          class=" custom-file-input"
          id="customFileUploadMultiple"
          multiple="multiple"
          type="file"
        />

        <label
          class=" custom-file-label"
          for="customFileUploadMultiple"
        >
          Choose file
        </label>
      </div>
    </div>

    <ul
      class=" dz-preview dz-preview-multiple list-group list-group-lg list-group-flush"
    >
      <li class=" list-group-item px-0">
        <div class=" row align-items-center">
          <div class=" col-auto">
            <div class=" avatar">
              <img
                alt="..."
                class=" avatar-img rounded"
                data-dz-thumbnail=""
                src="..."
              />
            </div>
          </div>

          <div class=" col ml--3">
            <h4 class=" mb-1" data-dz-name="">...</h4>

            <p class=" small text-muted mb-0" data-dz-size="">...</p>
          </div>

          <div class=" col-auto">
            <button data-dz-remove="true" class="btn btn-danger btn-sm"><i class="fas fa-trash"></i></button>
          </div>
        </div>
      </li>
    </ul>
  </div>

  <!-- Typescript -->

let currentMultipleFile = undefined;
// multiple dropzone file - accepts any type of file
new Dropzone(document.getElementsByClassName("dropzone-multiple")[0], {
  url: "https://",
  thumbnailWidth: null,
  thumbnailHeight: null,
  previewsContainer: document.getElementsByClassName(
    "dz-preview-multiple"
  )[0],
  previewTemplate: document.getElementsByClassName("dz-preview-multiple")[0]
    .innerHTML,
  maxFiles: null,
  acceptedFiles: null,
  init: function() {
    this.on("addedfile", function(file) {
      if (currentMultipleFile) {
      }
      currentMultipleFile = file;
    });
  }
});
document.getElementsByClassName("dz-preview-multiple")[0].innerHTML = "";