dropzone.js WordPress Integration Tutorial

Over on the Hacks forum at WordPress.org, user Manwoll was looking for a way to add drag-and-drop functionality to a contact form in WordPress. Not a fan of commercial contact form products myself, I sought out a method of doing this that would most accomodate a theme developer who is working on a custom solution for a client. The solution involves using dropzone.js and some basic PHP, and the end-state is a fully-functioning drag-and-drop box on a WordPress page that uploads files straight to your WP uploads directory.

The Problem#

Standard WordPress upload forms and functionality are limited to basic file upload features, like when you click on the “Select files” button in a box. We need a customized solution that will give us the ability to do the following:

• Create a drag-and-drop interface where people can drop files (assuming images?) and upload them to our site.
• Preview these images in the drop box for a truly simple visual interface experience.
• Store uploaded files in our uploads directory.

The Solution#

If you want a drag-and-drop section to upload files on a publicly-accessible page (like a contact page) then you could use dropzone.js.

I spent four hours this morning trying to get Dropzone to integrate into WordPress, and I think I found the solution. I had working example that I can put back up if someone is interested.

The form works perfectly and uploads the dropped files into my current uploads folder (wp-content/uploads/2013/06/%filename%). My demo link will not upload files because I don’t want people uploading malicious code. I’ve commented out the function, and all you have to do is uncomment it when you put it into your file.

Here’s what I did:

• Created a custom page in my template directory called page-dropzone-wordpress-integration.php
• Created a page called Dropzone WordPress Integration (to match my custom page above)
• Created a folder in my template directory called “dropzone”, then created a folder in that called “images”, then put the following files into it:
  • template_url/dropzone/dropzone.js
  • template_url/dropzone/images/spritemap.png
  • template_url/dropzone/images/spritemap@2x.png
• Opened my header.php file and added the following, just before the tag:

<?php if(is_page('dropzone-wordpress-integration')): ?> <script src="<?php echo get_bloginfo('template_directory'); ?>/dropzone/dropzone.js"></script> <?php endif; ?>

• Edited page-dropzone-wordpress-integration.php, adding the following after the_content():

<?php 
  if($_POST['submitted'] == 1): // Form has been upploaded

    $upload_dir = wp_upload_dir();
    $upload_path = $upload_dir['path'] . DIRECTORY_SEPARATOR;
    $num_files = count($_FILES['file']['tmp_name']);

    echo "Uploading files to $upload_path...<br/>";

    if (!empty($_FILES)) {

        $tempFile = $_FILES['file']['tmp_name'];

        $targetPath = $upload_path;

        $targetFile = $targetPath . $_FILES['file']['name'];

        //I've commented this to prevent people from uploading malicious things to my site.
        // You'll want to uncomment it before you use it.
        //move_uploaded_file($tempFile, $targetFile);

    }

    echo "All done! We'll review your files momentarily.";

    endif;
?>

<div id="fancy-contact-form">
  <form action="<?php the_permalink(); ?>" method="post" class="dropzone dz-clickable" enctype="multipart/form-data">
    <div class="dz-default dz-message"><span>Drop files here to upload</span></div>
    <input type="hidden" name="submitted" value="1">
    <p align="right"><input type="Submit" value="Upload files"></p>
  </form>
</div>
</li>
</ul>

Future Considerations#

• The form needs validation.
• I can’t stress this enough: do not copy and paste the code on this page without validating the input!
• I’d like to see an email go out to the admin of the site that says, “hey, someone just uploaded these files and are waiting for your review.”
• Add a hook to the media gallery handler so we can view the uploaded files in the media gallery, or (see below)
• Better yet, have an admin tab that allows the site mods to go through the uploaded files and do something with them. Think: picture contests, theme/plugin uploads, etc.