WP Dropzone

Upload files into WordPress media library from front-end.

Author:Nazmul Sabuz (profile at wordpress.org)
WordPress version required:4.0
WordPress version tested:5.8.4
Plugin version:1.0.7
Added to WordPress repository:02-11-2017
Last updated:21-09-2025
Rating, %:86
Rated by:4
Plugin URI:https://wordpress.org/plugins/wp-dropzone/
Total downloads:1 587
Active installs:90+
plugin download
Click to start download

WP Dropzone integrates the powerful Dropzone.js library with WordPress, allowing you to upload files directly into the WordPress media library from any post, page, or front-end location. The plugin provides a modern, user-friendly drag-and-drop interface with extensive customization options and advanced features for file management.

Key Features

  • Drag & Drop Interface – Modern, intuitive file upload experience
  • Customizable Styling – Full control over appearance with CSS customization
  • File Validation – Built-in file type and size validation
  • Image Processing – Automatic image resizing, cropping, and quality optimization
  • Thumbnail Generation – Customizable thumbnail previews
  • Security Features – Nonce verification and user permission checks
  • Action Hooks – WordPress hooks for customization and integration
  • Translation Ready – Full internationalization support
  • Performance Optimized – Assets loaded only when needed

Shortcode Usage

Insert the dropzone anywhere in your posts, pages, or templates with the shortcode:

[wp-dropzone]

Or in PHP templates:

<?php echo do_shortcode( '[wp-dropzone]' ); ?>

Shortcode Attributes

The following attributes can be used with the [wp-dropzone] shortcode:

  • id – Unique identifier for the dropzone instance (Default: Auto-generated)
    Example: [wp-dropzone id="myUploader"]

  • title – Title displayed above the dropzone (Default: Empty)
    Example: [wp-dropzone title="Drop Files Here"]

  • desc – Description text for the dropzone (Default: Empty)
    Example: [wp-dropzone desc="Upload your files here"]

  • accepted-files – Allowed file types (Default: All files)
    Example: [wp-dropzone accepted-files="image/*"]

  • max-files – Maximum number of files (Default: Unlimited)
    Example: [wp-dropzone max-files="3"]

  • auto-process – Auto-upload files when dropped (Default: true)
    Example: [wp-dropzone auto-process="false"]

  • clickable – Make dropzone clickable (Default: true)
    Example: [wp-dropzone clickable="false"]

  • remove-links – Show remove file buttons (Default: false)
    Example: [wp-dropzone remove-links="true"]

  • upload-button-text – Text for manual upload button (Default: “Upload Files”)
    Example: [wp-dropzone upload-button-text="Upload Selected Files"]

  • resize-width – Resize images to specified width (Default: Original)
    Example: [wp-dropzone resize-width="800"]

  • resize-height – Resize images to specified height (Default: Original)
    Example: [wp-dropzone resize-height="600"]

  • resize-quality – Image quality (0.1-1.0) (Default: 0.8)
    Example: [wp-dropzone resize-quality="0.9"]

  • resize-method – Resize method: contain/crop (Default: contain)
    Example: [wp-dropzone resize-method="crop"]

  • thumbnail-width – Thumbnail width in pixels (Default: 120)
    Example: [wp-dropzone thumbnail-width="150"]

  • thumbnail-height – Thumbnail height in pixels (Default: 120)
    Example: [wp-dropzone thumbnail-height="150"]

  • thumbnail-method – Thumbnail method: contain/crop (Default: crop)
    Example: [wp-dropzone thumbnail-method="contain"]

Styling Options

The following styling attributes can be used to customize the dropzone appearance:

  • border-width – Border width
    Example: [wp-dropzone border-width="3px"]

  • border-style – Border style (solid, dashed, etc.)
    Example: [wp-dropzone border-style="dashed"]

  • border-color – Border color (hex code)
    Example: [wp-dropzone border-color="#007cba"]

  • background – Background color (hex code)
    Example: [wp-dropzone background="#f0f0f1"]

  • margin-bottom – Bottom margin
    Example: [wp-dropzone margin-bottom="20px"]

Advanced Features

Action Hooks

The plugin provides several action hooks for customization:

// Before file upload
do_action( 'wp_dropzone_before_upload_file', $file );

// After file upload
do_action( 'wp_dropzone_after_upload_file', $file );

// After media library insertion
do_action( 'wp_dropzone_after_insert_attachment', $attachment_id );

JavaScript Integration

Access dropzone instance and events:

// Get dropzone instance
var dropzone = Dropzone.forElement("#wp-dz-yourID");

// Add event listeners
dropzone.on("success", function(file, response) {
    console.log("File uploaded:", response);
});

Examples

Basic Image Upload

[wp-dropzone accepted-files="image/*" max-files="5" title="Upload Images"]

Document Upload with Restrictions

[wp-dropzone accepted-files=".pdf,.doc,.docx" title="Upload Documents" desc="PDF, DOC, DOCX files only"]

Styled Upload Area

[wp-dropzone title="Drop Files Here" desc="Drag and drop files or click to browse" border-style="dashed" border-color="#007cba" background="#f8f9fa"]

Manual Upload Button

[wp-dropzone auto-process="false" upload-button-text="Upload Selected Files" title="Select Files"]
ChangeLog