WordPress - Integrate DropzoneJS

From XennisWiki
Jump to: navigation, search

DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews. (Dropzone.js) In this article we integrate Dropzone in a [WordPress] admin page.

Plugin page with Dropzone

Empty Dropzone

WordPress and DropzoneJS.png

Dropzone with uploaded files

WordPress and DropzoneJS 2.png

Structure

myApp/
 |- js/dropzone/
 |      |- dropzone.css
 |      |- dropzone.js
 |
 |- style/
 |   |- main.css
 |
 |- myApp.php

Setup

Add Dropzone.js CSS and JS files and a custom main.css file

function myApp_enqueue_scripts() {

    // Style
    wp_enqueue_style('myApp-dropzone', plugins_url('/js/dropzone/dropzone.css', __FILE__));
    wp_enqueue_style('myApp', plugins_url('/style/main.css', __FILE__));

    // Script
    wp_enqueue_script('myApp-dropzone', plugins_url('/js/dropzone/dropzone.js'));
}
add_action('wp_enqueue_scripts', 'myApp_enqueue_scripts');

Add a page with the slug myApp

function myApp_admin_menu() {
	
    add_menu_page('My App', 'MyApp', 'edit_others_pages', 'myApp', null, 'dashicons-camera', 'myApp_page');
}
add_action('admin_menu', 'myApp_admin_menu');

Add the Dropzone on this page

<?php
function myApp_page() {
    $upload_dir = wp_upload_dir();
    $upload_path = $upload_dir['path'] . DIRECTORY_SEPARATOR;
    $resultUpload = myApp_uploadFiles($upload_path);
?>
<div class="wrap">
    <h2>Upload new media</h2>
    <form method="POST" enctype="multipart/form-data" action="admin.php?page=myApp" class="dropzone">
        <div class="fallback">
	     <input name="file" type="file" multiple /> 
	</div>
     </form>
     <p class="max-upload-size"><?php printf( __( 'Maximum upload file size: %s.' ), esc_html( size_format( wp_max_upload_size() ) ) ); ?></p>
</div>
<?php
}

Style

Use the style/main.css to overwrite some of the default styles

/* ------------------ Overwrite Dropzone.js style ----------------------------*/
.dropzone {
	border: 4px dashed rgb(0, 115, 170);
	background: none;
	height: 200px;
	margin-top: 20px;
}

.dropzone .dz-message {
	font-size: 25px;
	color: #a0a5aa;
}

.dropzone .dz-preview.dz-image-preview {
	background-color: transparent;
}

PHP file upload

/**
 * Moves the uploaded, temporary files and stores them.
 *
 * @param string $upload_path Upload location
 * @return boolean True, if upload was successful
 */
function myApp_uploadFiles($upload_path) {
    if (!empty($_FILES)) { 	
        $tempFile = $_FILES['file']['tmp_name']; //this is temporary server location
        $targetFile = $upload_path . $_FILES['file']['name'];
        return move_uploaded_file($tempFile, $targetFile);
    }
    return FALSE;
}

See also

External links