Overview

Dropzone is a component that provides drag-and-drop file upload with image preview.

Reference

Instance Methods
Name Description
public constructor() Create a new instance of the Dropzone class.
Parameters:
  • element: string|HTMLElement|JQuery
    HTMLElement selector, element, or JQuery object.
  • options.hiddenInputContent?: HTMLInputElement
    hidden element to store the uploaded content. For media data such as images and PDFs, DataURL is set; for text data such as CSV, text data is set.
  • options.acceptedFiles?: string
    A comma-separated list of MIME types or file extensions (e.g., "image/*,application/pdf,.psd") for files that are allowed to be uploaded. Default is none (undefined).
  • options.maxFilesize?: number
    The maximum filesize (in bytes) that is allowed to be uploaded. Default is none (undefined).
  • options.dictDefaultMessage?: string
    Drop zone title text. Default is "Drop files here to upload".
  • options.dictDescriptionMessage?: string
    Drop zone description text. Default is none (undefined).
  • options.dictFileTooBig?: string
    Error message to be displayed if the file size exceeds the allowable size.
    Default is "File is too big ({{filesize}}MiB). Max filesize: {{maxFilesize}}MiB.".
    "{{filesize}}" is set to the selected file size, and "{{maxFilesize}}" is set to the file size that can be uploaded. 
                    import {components} from 'metronic-extension';

// Initialize the component and set up event listeners.
const dropzone = new components.Dropzone(document.getElementById('myDropzone'), {
  hiddenInputContent: document.getElementById('myFileContent'),
  maxFilesize: 10,
  dictDescriptionMessage: 'Files up to 10 MB can be uploaded',
  acceptedFiles: 'image/jpeg,image/png,image/gif',
});
public onAddFile() Sets the callback function to be called when a file is added. The callback function takes a file object.
Parameters:
  • handler: (file: Dropzone.DropzoneFile) => void
    Callback function.
Return:
  • DropzoneComponent
                    // Called when a file is added.
dropzone.onAddFile(file => {
  alert(`From additional handlers. Select ${file.name}`);
});
public onCancelFile() Sets the callback function to be called when an uploaded file is canceled.
Parameters:
  • handler: () => void
    Callback function.
Return:
  • DropzoneComponent
                    // Called when an uploaded file is canceled.
dropzone.onCancelFile(() => {
  alert('Canceled file selection');
});

Basic

Dropzone example with manual file attachment and upload controls.
              <!--begin::Dropzone-->
<div id="myDropzone"></div>
<!--end::Dropzone-->
<!--begin::DataURL of the selected file-->
<input id="myFileContent" type="hidden">
<!--end::DataURL of the selected file-->
            
              import {components} from 'metronic-extension';

// Initialize the component and set up event listeners.
const dropzone = new components.Dropzone(document.getElementById('myDropzone'), {
  hiddenInputContent: document.getElementById('myFileContent'),
  maxFilesize: 10,
  dictDescriptionMessage: 'Files up to 10 MB can be uploaded',
  acceptedFiles: 'image/jpeg,image/png,image/gif',
});

dropzone
  .onAddFile(file => {
    // Called when a file is added.
    alert(`From additional handlers. Select ${file.name}`);
  })
  .onCancelFile(() => {
    // Called when an uploaded file is canceled.
    alert('Canceled file selection');
  });