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"]

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"]