Logo

Documentation v4.0.0

  • Home
  • Components
  • Dropzone
Light
Dark
System

Overview

Dropzone is a wrapper around Dropzone.js that provides a drag-and-drop file upload area with Metronic styling. Uploaded file content is stored as a Data URL (for media) or text (for CSV, etc.) in a hidden input element.

Import

import {components} from 'metronic-extension';
const {Dropzone} = components;

Constructor

new Dropzone(element, options)
Parameter Type Description
element string | HTMLElement CSS selector string or HTMLElement.
options DropzoneOptions Configuration options for the dropzone.

DropzoneOptions

Property Type Default Description
hiddenInputContent HTMLInputElement - Hidden input to store uploaded content (Data URL or text).
acceptedFiles string - Comma-separated MIME types or extensions. e.g. "image/*,application/pdf,.psd"
maxFilesize number - Maximum file size in bytes.
dictDefaultMessage string "Drop files here to upload" Drop zone title text.
dictDescriptionMessage string - Drop zone description text.
dictFileTooBig string - Error message when file exceeds max size.

Methods

Method Return Description
onAddFile(handler) Dropzone Callback when a file is added. Receives the DropzoneFile object.
onCancelFile(handler) Dropzone Callback when file upload is cancelled.

Basic Example

A simple drag-and-drop file upload area. Drop or click to select a file.
<div id="myDropzone"></div>
<input id="fileContent" type="hidden">

import {components} from 'metronic-extension';
const {Dropzone} = components;

const dropzone = new Dropzone('#myDropzone', {
  hiddenInputContent: document.getElementById('fileContent'),
});

dropzone.onAddFile(file => {
  console.log('File added:', file.name);
});

dropzone.onCancelFile(() => {
  console.log('File removed');
});

Image Upload Example

Accept only image files with a 5 MB size limit. Shows the Data URL length when a file is selected.
<div id="myDropzone"></div>
<input id="fileContent" type="hidden">

import {components} from 'metronic-extension';
const {Dropzone} = components;

const dropzone = new Dropzone('#myDropzone', {
  hiddenInputContent: document.getElementById('fileContent'),
  acceptedFiles: 'image/*',
  maxFilesize: 5 * 1024 * 1024, // 5MB
  dictDefaultMessage: 'Drop your image here',
  dictDescriptionMessage: 'Only image files up to 5 MB',
});

dropzone.onAddFile(file => {
  console.log('Image added:', file.name, file.size, 'bytes');
});
Previous Dialog Next ImageInput