Upload files into WordPress media library from front-end with drag-and-drop functionality and customizable options.

Nazmul Sabuz

<p>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.</p>
<h3>Key Features</h3>
<ul>
<li><strong>Drag & Drop Interface</strong> – Modern, intuitive file upload experience</li>
<li><strong>Customizable Styling</strong> – Full control over appearance with CSS customization</li>
<li><strong>File Validation</strong> – Built-in file type and size validation</li>
<li><strong>Image Processing</strong> – Automatic image resizing, cropping, and quality optimization</li>
<li><strong>Thumbnail Generation</strong> – Customizable thumbnail previews</li>
<li><strong>Security Features</strong> – Nonce verification and user permission checks</li>
<li><strong>Action Hooks</strong> – WordPress hooks for customization and integration</li>
<li><strong>Translation Ready</strong> – Full internationalization support</li>
<li><strong>Performance Optimized</strong> – Assets loaded only when needed</li>
</ul>
<h3>Shortcode Usage</h3>
<p>Insert the dropzone anywhere in your posts, pages, or templates with the shortcode:</p>
<pre><code>[wp-dropzone]
</code></pre>
<p>Or in PHP templates:</p>
<pre><code><?php echo do_shortcode( '[wp-dropzone]' ); ?>
</code></pre>
<h3>Shortcode Attributes</h3>
<p>The following attributes can be used with the <code>[wp-dropzone]</code> shortcode:</p>
<ul>
<li>
<p><code>id</code> – Unique identifier for the dropzone instance (Default: Auto-generated)<br />
Example: <code>[wp-dropzone id="myUploader"]</code></p>
</li>
<li>
<p><code>title</code> – Title displayed above the dropzone (Default: Empty)<br />
Example: <code>[wp-dropzone title="Drop Files Here"]</code></p>
</li>
<li>
<p><code>desc</code> – Description text for the dropzone (Default: Empty)<br />
Example: <code>[wp-dropzone desc="Upload your files here"]</code></p>
</li>
<li>
<p><code>accepted-files</code> – Allowed file types (Default: All files)<br />
Example: <code>[wp-dropzone accepted-files="image/*"]</code></p>
</li>
<li>
<p><code>max-files</code> – Maximum number of files (Default: Unlimited)<br />
Example: <code>[wp-dropzone max-files="3"]</code></p>
</li>
<li>
<p><code>auto-process</code> – Auto-upload files when dropped (Default: true)<br />
Example: <code>[wp-dropzone auto-process="false"]</code></p>
</li>
<li>
<p><code>clickable</code> – Make dropzone clickable (Default: true)<br />
Example: <code>[wp-dropzone clickable="false"]</code></p>
</li>
<li>
<p><code>remove-links</code> – Show remove file buttons (Default: false)<br />
Example: <code>[wp-dropzone remove-links="true"]</code></p>
</li>
<li>
<p><code>upload-button-text</code> – Text for manual upload button (Default: “Upload Files”)<br />
Example: <code>[wp-dropzone upload-button-text="Upload Selected Files"]</code></p>
</li>
<li>
<p><code>resize-width</code> – Resize images to specified width (Default: Original)<br />
Example: <code>[wp-dropzone resize-width="800"]</code></p>
</li>
<li>
<p><code>resize-height</code> – Resize images to specified height (Default: Original)<br />
Example: <code>[wp-dropzone resize-height="600"]</code></p>
</li>
<li>
<p><code>resize-quality</code> – Image quality (0.1-1.0) (Default: 0.8)<br />
Example: <code>[wp-dropzone resize-quality="0.9"]</code></p>
</li>
<li>
<p><code>resize-method</code> – Resize method: contain/crop (Default: contain)<br />
Example: <code>[wp-dropzone resize-method="crop"]</code></p>
</li>
<li>
<p><code>thumbnail-width</code> – Thumbnail width in pixels (Default: 120)<br />
Example: <code>[wp-dropzone thumbnail-width="150"]</code></p>
</li>
<li>
<p><code>thumbnail-height</code> – Thumbnail height in pixels (Default: 120)<br />
Example: <code>[wp-dropzone thumbnail-height="150"]</code></p>
</li>
<li>
<p><code>thumbnail-method</code> – Thumbnail method: contain/crop (Default: crop)<br />
Example: <code>[wp-dropzone thumbnail-method="contain"]</code></p>
</li>
</ul>
<h3>Styling Options</h3>
<p>The following styling attributes can be used to customize the dropzone appearance:</p>
<ul>
<li>
<p><code>border-width</code> – Border width<br />
Example: <code>[wp-dropzone border-width="3px"]</code></p>
</li>
<li>
<p><code>border-style</code> – Border style (solid, dashed, etc.)<br />
Example: <code>[wp-dropzone border-style="dashed"]</code></p>
</li>
<li>
<p><code>border-color</code> – Border color (hex code)<br />
Example: <code>[wp-dropzone border-color="#007cba"]</code></p>
</li>
<li>
<p><code>background</code> – Background color (hex code)<br />
Example: <code>[wp-dropzone background="#f0f0f1"]</code></p>
</li>
<li>
<p><code>margin-bottom</code> – Bottom margin<br />
Example: <code>[wp-dropzone margin-bottom="20px"]</code></p>
</li>
</ul>
<h3>Advanced Features</h3>
<h4>Action Hooks</h4>
<p>The plugin provides several action hooks for customization:</p>
<pre><code>// 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 );
</code></pre>
<h4>JavaScript Integration</h4>
<p>Access dropzone instance and events:</p>
<pre><code>// Get dropzone instance
var dropzone = Dropzone.forElement("#wp-dz-yourID");

// Add event listeners
dropzone.on("success", function(file, response) {
    console.log("File uploaded:", response);
});
</code></pre>
<h3>Examples</h3>
<h4>Basic Image Upload</h4>
<pre><code>[wp-dropzone accepted-files="image/*" max-files="5" title="Upload Images"]
</code></pre>
<h4>Document Upload with Restrictions</h4>
<pre><code>[wp-dropzone accepted-files=".pdf,.doc,.docx" title="Upload Documents" desc="PDF, DOC, DOCX files only"]
</code></pre>
<h4>Styled Upload Area</h4>
<pre><code>[wp-dropzone title="Drop Files Here" desc="Drag and drop files or click to browse" border-style="dashed" border-color="#007cba" background="#f8f9fa"]
</code></pre>
<h4>Manual Upload Button</h4>
<pre><code>[wp-dropzone auto-process="false" upload-button-text="Upload Selected Files" title="Select Files"]
</code></pre>


WP Dropzone

Very nicely written, no heavy front-end or mess of scripts to disable, just a succinct and perfectly functioning Dropzone on your Wordpress or Woocommerce website with simple options to include, via Shortcode.

I'm a very happy user! 

Alternatives to WP Dropzone

Top alternatives