Constructor and Configuration

/**
 * Creates a new Dropzone instance
 * @param element - CSS selector string or HTMLElement to convert to dropzone
 * @param options - Configuration options object
 */
constructor(element: string | HTMLElement, options?: DropzoneOptions): Dropzone;

// Basic initialization with minimal config
const dropzone = new Dropzone("#my-form", {
  url: "/upload"
});

// Advanced configuration
const dropzone = new Dropzone(document.getElementById("upload-area"), {
  url: "/api/files",
  method: "post",
  maxFilesize: 5, // MB
  maxFiles: 10,
  acceptedFiles: "image/*,application/pdf",
  parallelUploads: 3,
  addRemoveLinks: true,
  dictDefaultMessage: "Drop files here or click to upload",
  
  // Custom validation
  accept: function(file, done) {
    if (file.name.includes("secret")) {
      done("Files with 'secret' in name are not allowed");
    } else {
      done();
    }
  },
  
  // Initialization callback
  init: function() {
    this.on("success", function(file, response) {
      console.log("File uploaded:", file.name);
    });
  }
});

interface DropzoneOptions {
  /** Upload URL (required unless element is a form with action attribute) */
  url?: string;
  /** HTTP method for uploads */
  method?: string;
  /** Whether to send credentials with CORS requests */
  withCredentials?: boolean;
  /** Maximum number of parallel uploads */
  parallelUploads?: number;
  /** Whether to send multiple files in a single request */
  uploadMultiple?: boolean;
  /** Maximum file size in MB */
  maxFilesize?: number;
  /** Parameter name for the file in the request */
  paramName?: string;
  /** Whether to create image thumbnails */
  createImageThumbnails?: boolean;
  /** Maximum file size for thumbnail generation in MB */
  maxThumbnailFilesize?: number;
  /** Thumbnail width in pixels */
  thumbnailWidth?: number;
  /** Thumbnail height in pixels */
  thumbnailHeight?: number;
  /** Base for filesize calculation (1000 or 1024) */
  filesizeBase?: number;
  /** Maximum number of files allowed */
  maxFiles?: number;
  /** Additional parameters to send with upload */
  params?: object;
  /** Whether dropzone should be clickable for file selection */
  clickable?: boolean | string | HTMLElement | HTMLElement[];
  /** Whether to ignore hidden files in directories */
  ignoreHiddenFiles?: boolean;
  /** Accepted file types (MIME types or extensions) */
  acceptedFiles?: string;
  /** Whether to automatically process the upload queue */
  autoProcessQueue?: boolean;
  /** Whether to automatically add files to the queue */
  autoQueue?: boolean;
  /** Whether to show remove links on file previews */
  addRemoveLinks?: boolean;
  /** Container element for file previews */
  previewsContainer?: string | HTMLElement;
  /** Container for hidden file input */
  hiddenInputContainer?: string;
  /** Capture mode for mobile devices */
  capture?: string;
  /** Function to rename files before upload */
  renameFilename?: (name: string) => string;
  /** File validation function */
  accept?: (file: File, done: (error?: string) => void) => void;
  /** Initialization callback */
  init?: () => void;
  /** Force fallback mode */
  forceFallback?: boolean;
  /** Fallback initialization function */
  fallback?: () => void;
  /** Thumbnail resize function */
  resize?: (file: File) => {
    srcX: number;
    srcY: number; 
    srcWidth: number;
    srcHeight: number;
    trgX: number;
    trgY: number;
    trgWidth: number;
    trgHeight: number;
  };
}

interface DictionaryOptions {
  /** Default message shown when no files are present */
  dictDefaultMessage?: string;
  /** Message shown when browser doesn't support drag and drop */
  dictFallbackMessage?: string;
  /** Text shown before fallback form */
  dictFallbackText?: string;
  /** Error message for files that are too big */
  dictFileTooBig?: string;
  /** Error message for invalid file types */
  dictInvalidFileType?: string;
  /** Error message for server errors */
  dictResponseError?: string;
  /** Text for cancel upload link */
  dictCancelUpload?: string;
  /** Confirmation message for canceling uploads */
  dictCancelUploadConfirmation?: string;
  /** Text for remove file link */
  dictRemoveFile?: string;
  /** Confirmation message for removing files */
  dictRemoveFileConfirmation?: string;
  /** Message when max files limit is exceeded */
  dictMaxFilesExceeded?: string;
}

// Default dictionary values
const defaultDictionary: DictionaryOptions = {
  dictDefaultMessage: "Drop files here to upload",
  dictFallbackMessage: "Your browser does not support drag'n'drop file uploads.",
  dictFallbackText: "Please use the fallback form below to upload your files like in the olden days.",
  dictFileTooBig: "File is too big ({{filesize}}MiB). Max filesize: {{maxFilesize}}MiB.",
  dictInvalidFileType: "You can't upload files of this type.",
  dictResponseError: "Server responded with {{statusCode}} code.",
  dictCancelUpload: "Cancel upload",
  dictCancelUploadConfirmation: "Are you sure you want to cancel this upload?",
  dictRemoveFile: "Remove file",
  dictRemoveFileConfirmation: null,
  dictMaxFilesExceeded: "You can not upload any more files."
};

interface DropzoneInstance {
  /** Dropzone version number */
  version: string;
  /** The DOM element this dropzone is attached to */
  element: HTMLElement;
  /** Array of all files in this dropzone */
  files: File[];
  /** Merged configuration options */
  options: DropzoneOptions;
  /** Array of clickable elements that trigger file selection */
  clickableElements: HTMLElement[];
  /** Array of event listeners */
  listeners: any[];
  /** Container element for file previews */
  previewsContainer: HTMLElement;
  /** Hidden file input element */
  hiddenFileInput?: HTMLInputElement;
}

// Global configuration for auto-discovery
static autoDiscover: boolean; // Default: true

// Configure specific elements by ID
static options: { [elementId: string]: DropzoneOptions | false };

<!-- Automatic initialization -->
<form action="/upload" class="dropzone" id="my-dropzone">
  <div class="dz-message">Drop files here to upload</div>
</form>

<script>
// Configure before auto-discovery
Dropzone.options.myDropzone = {
  maxFilesize: 2,
  acceptedFiles: "image/*"
};

// Disable auto-discovery for specific element
Dropzone.options.myOtherDropzone = false;

// Disable auto-discovery globally
Dropzone.autoDiscover = false;
</script>

/**
 * Initialize the dropzone (called automatically by constructor)
 */
init(): void;

/**
 * Destroy the dropzone and clean up resources
 */
destroy(): void;

/**
 * Disable the dropzone (stops accepting files)
 */
disable(): void;

/**
 * Enable the dropzone (starts accepting files)
 */
enable(): void;

const dropzone = new Dropzone("#my-dropzone", { url: "/upload" });

// Temporarily disable uploads
dropzone.disable();

// Re-enable uploads
dropzone.enable();

// Clean up when done
dropzone.destroy();