Support » Plugins and Hacks » Hacks » Adding Drag and Drop for user uploads

  • 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…

    Phil

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator bcworkz

    (@bcworkz)

    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:

    http://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:
    • 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?

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Adding Drag and Drop for user uploads’ is closed to new replies.