Adding Drag and Drop for user uploads

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

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!

Phil

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:

https://lawsonry.com/dropzone-wordpress-integration

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:

• template_url/dropzone/dropzone.js
• template_url/dropzone/images/spritemap.png
• template_url/dropzone/images/[email protected]

• 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.";
  
  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>

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

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

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