About this plugin
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:
>
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"]
-
8)
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)
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 the unfiltered_html capability (Administrators by default). 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"]
-
)
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:
forElement("#wp-dz-yourID");
log("File uploaded:", response); });
Examples
Basic Image Upload
[wp-dropzone accepted-files="image/*" max-files="5" title="Upload Images"]
Document Upload with Restrictions
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"]