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 the unfiltered_html capability (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"]