add_dropzone_to_form

dropzone-integration.js

Dropzone.options.dropzoneWordpressForm = {
  acceptedFiles: "image/*", // all image mime types
  maxFiles: 5, // max allowed upload
  uploadMultiple: false,
  maxFilesize: 5, // 5 MB
  //addRemoveLinks: true,
  //dictRemoveFile: 'X (remove)',
  init: function() {
    this.on("sending", function(file, xhr, formData) {
      formData.append("name", "value"); // Append all the additional input data of your form here!
    });
    this.on("success", function(file, responseText) {
     alert(responseText); // do something with attachment ID
    });
  }
};

dropzone.php

<?php
function dropzone_add_js() {
	$dzversion = '4.3.0';
	wp_enqueue_style('dropzone', 'https://cdnjs.cloudflare.com/ajax/libs/dropzone/'.$dzversion.'/min/dropzone.min.css', array());
	wp_enqueue_script('dropzone', 'https://cdnjs.cloudflare.com/ajax/libs/dropzone/'.$dzversion.'/min/dropzone.min.js', array());
 	wp_enqueue_script('colorbox', get_template_directory_uri().'/assets/js/dropzone-integration.js', array('jquery'), filemtime(get_template_directory().'/assets/js/dropzone-integration.js'), true );
}
add_action('wp_enqueue_scripts', 'dropzone_add_js');

add_shortcode( 'dropzone', 'dropzonejs_shortcode' );
function dropzonejs_shortcode( $atts ) {
	$url         = admin_url( 'admin-ajax.php' );
	$nonce_files = wp_nonce_field( 'protect_content', 'my_nonce_field' );

	ob_start();
	?>
	<div id="dropzone-wordpress"><form action="<?php echo $url;?>" class="dropzone needsclick dz-clickable" id="dropzone-wordpress-form">
		<?php echo $nonce_files;?>
		<span class="fa-stack">
		  <i class="fa fa-image fa-stack-1x fa-nudge-right fa-nudge-down fa-outline-inverse" style="font-size:1.5em" ></i>
		  <i class="fa fa-image fa-stack-1x fa-outline-inverse"  style="font-size:1.5em" ></i>
		  <div style="background-color:#f4f4f4;width:70%;height:55%;left:4%;top:10%;position:absolute"></div>
		  <i class="fa fa-image fa-stack-1x fa-nudge-left fa-nudge-up fa-outline-inverse" style="font-size: 1.5em"></i>
		</span>
		<div class="dz-message needsclick">
			או גרור לכאן
	  	</div>
		<input type='hidden' name='action' value='submit_dropzonejs'>
	</form></div>
	<?php
	$html = ob_get_clean();
	return $html;
}

add_action( 'wp_ajax_nopriv_submit_dropzonejs', 'dropzone_upload_file' ); //allow on front-end
add_action( 'wp_ajax_submit_dropzonejs', 'dropzone_upload_file' );

function dropzone_upload_file() {

	if ( !empty( $_FILES ) && wp_verify_nonce( $_REQUEST['my_nonce_field'], 'protect_content' ) ) {

		$uploaded = wp_upload_bits(
			$_FILES['file']['name'],
			null, //deprecated
			file_get_contents( $_FILES['file']['tmp_name'] )
		);
    
		if ( false !== $uploaded['error'] ) {
			$error = $uploaded['error'];
			return add_action( 'admin_notices', function() use ( $error ) {
					$msg[] = '<div class="error"><p>';
					$msg[] = '<strong>DropzoneJS & WordPress</strong>: ';
					$msg[] = sprintf( __( 'wp_upload_bits failed,  error: "<strong>%s</strong>' ), $error );
					$msg[] = '</p></div>';
					echo implode( PHP_EOL, $msg );
				} );
		}
		$uploaded_file     = $uploaded['file'];
		$uploaded_url      = $uploaded['url'];
		$attachment = array(
		    'post_mime_type' => $uploaded['type']
		    );
		$attach_id = wp_insert_attachment( $attachment, $uploaded_file);
		require_once(ABSPATH . 'wp-admin/includes/image.php');
		$attach_data = wp_generate_attachment_metadata( $attach_id, $uploaded_file );
		wp_update_attachment_metadata( $attach_id, $attach_data );
		echo $attach_id;
	}
	die();
}