Adding Drag and Drop for user uploads (6 posts)

  1. Manwoll
    Posted 3 years ago #

    Hi everyone. I've been searching the plugins directory but don't seem to be able to locate a plugin that does what I want. I have a client who wants his user/prospects to be able to upload files to a contact form using a drag and drop interface.

    Doesn't sound too unusual, it's similar to what Facebook has, which I assume uses PHP and some javascript.

    If anyone knows of a plugin that may work, or has any other advice about locating or developing the right code, I would be very keen to hear from you!

    Thanks for your time, and lok forward to some replies...


  2. bcworkz
    Posted 3 years ago #

    WordPress already uses Plupload to handle media uploads, you could adapt it for your own needs.

  3. Manwoll
    Posted 3 years ago #

    Thanks bcworkz, I knew that but aren't exactly proficient at code (as in not sure where I'd start). I've adapted a couple of plugins, mainly to changes colours or fonts, but not too sure how to tackle that. Is there anywhere you know where I can get some basic low-down on altering the functionality of plugins?

    Thanks for your response, much appreciated!


  4. Lawsonry
    Posted 3 years ago #

    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 have a working example over on my blog at the following address:


    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.

    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:
    • Opened my header.php file and added the following, just before the </head> 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.";
      <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>

    Again, check out the working example over on my blog (click here). I'll keep it up as long as you need.

  5. eranbeard
    Posted 2 years ago #

    Hi Lawsonry, please can you put that example on your blog again so I can see. Thank you for such an informative reply.

  6. pepechongo
    Posted 2 years ago #

    Hi @Lawsonry can you upload again the page demo on your website to check the UX out?

Topic Closed

This topic has been closed to new replies.

About this Topic