WP Dropzone
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"] -
callback– Custom JavaScript callbacks for Dropzone events (Advanced) Example:[wp-dropzone callback="success: function(file, response) { document.getElementById('hidden-field').value = response.data; }"]Note: Since this attribute is executed as JavaScript, it is only honored when the page/post containing the shortcode was authored by a user with theunfiltered_htmlcapability (Administrators by default). This prevents lower-privileged authors (e.g. Contributors) from injecting scripts that would run in another user’s browser.
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"]