When using Dropzone.js, how to make maksbd19’s wordpress integration work

I am trying to make dropzone.js work within a wordpress framework based upon a solution presented by maksbd19. My question is about debugging his method I implemented:

See his guide here:
How to integrate Dropzonejs with wordpress media handler in frontend?
but I can’t get his solution to work properly.

Read More

Here is the error I get when loading the php compatibility file based on the answer in the post:

Status Code:500 Internal Server Error PHP Parse error: syntax error,
unexpected T_STRING in …wordpress_compability.php on line 8.

And on line 8 I have this line:

wp_localize_script('my-script','dropParam', $drop_param);

Down below is the full code I use:

html file:
Head:

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/frameworks/dropzone/css/dropzone.css">
<script src="<?php bloginfo('template_url'); ?>/frameworks/dropzone/dropzone.js"></script>
<script src="<?php bloginfo('template_url'); ?>/frameworks/dropzone/wordpress_compability.js"></script>
<script src="<?php bloginfo('template_url'); ?>/frameworks/dropzone/wordpress_compability.php"></script>

Body:

<div id="media-uploader" class="dropzone"></div>
<input type="hidden" name="media-ids" value="">

JS file:

    Dropzone.autoDiscover = false;
jQuery("#media-uploader").dropzone({
    url: dropParam.upload,
    acceptedFiles: 'image/*',
    success: function (file, response) {
        file.previewElement.classList.add("dz-success");
        file['attachment_id'] = response; // push the id for future reference
        var ids = jQuery('#media-ids').val() + ',' + response;
        jQuery('#media-ids').val(ids);
    },
    error: function (file, response) {
        file.previewElement.classList.add("dz-error");
    }
    // update the following section is for removing image from library
    addRemoveLinks: true,
    removedfile: function(file) {
        var attachment_id = file.attachment_id;        
        jQuery.ajax({
            type: 'POST',
            url: dropParam.delete,
            data: {
                media_id : attachment_id
            }
        });
        var _ref;
        return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;        
    }
});

PHP file:

<?
wp_enqueue_script('dropzone',"/var/www/vhosts/jtc.ae/httpdocs/pre/wp/wp-content/themes/Amazing_japan_HP/frameworks/dropzone/");
wp_enqueue_script('my-script',"/var/www/vhosts/jtc.ae/httpdocs/pre/wp/wp-content/themes/Amazing_japan_HP/frameworks/dropzone/dropzone.js",array('jquery','dropzone'));
$drop_param = array(
  'upload'=>admin_url( 'admin-post.php?action=handle_dropped_media' ),
  'delete'=>admin_url( 'admin-post.php?action=handle_deleted_media' ),
)
wp_localize_script('my-script','dropParam', $drop_param);


add_action( 'admin_post_handle_dropped_media', 'BMP_handle_dropped_media' );

// if you want to allow your visitors of your website to upload files, be cautious.
add_action( 'admin_post_nopriv_handle_dropped_media', 'BMP_handle_dropped_media' );



function handle_dropped_media() {
    status_header(200);

    $upload_dir = wp_upload_dir();
    $upload_path = $upload_dir['path'] . DIRECTORY_SEPARATOR;
    $num_files = count($_FILES['file']['tmp_name']);

    $newupload = 0;

    if ( !empty($_FILES) ) {
        $files = $_FILES;
        foreach($files as $file) {
            $newfile = array (
                    'name' => $file['name'],
                    'type' => $file['type'],
                    'tmp_name' => $file['tmp_name'],
                    'error' => $file['error'],
                    'size' => $file['size']
            );

            $_FILES = array('upload'=>$newfile);
            foreach($_FILES as $file => $array) {
                $newupload = media_handle_upload( $file, 0 );
            }
        }
    }

    echo $newupload;    
    die();
}
?>

Any ideas?

Related posts

1 comment

  1. well as the error says, there is an unexpected string. you should check that you are passing the expected arguments to the function – see https://codex.wordpress.org/Function_Reference/wp_localize_script

    also it seems like these two lines have the wrong paths

    wp_enqueue_script('dropzone',"/var/www/vhosts/jtc.ae/httpdocs/pre/wp/wp-content/themes/Amazing_japan_HP/frameworks/dropzone/");
    wp_enqueue_script('my-script',"/var/www/vhosts/jtc.ae/httpdocs/pre/wp/wp-content/themes/Amazing_japan_HP/frameworks/dropzone/dropzone.js",array('jquery','dropzone'));
    

    wp_enqueue_script() takes a path to a script as it’s second argument (https://codex.wordpress.org/Function_Reference/wp_enqueue_script) so the first line should probably be

    wp_enqueue_script('dropzone',"/var/www/vhosts/jtc.ae/httpdocs/pre/wp/wp-content/themes/Amazing_japan_HP/frameworks/dropzone/dropzone.js");
    

    and the second one should be the path to your custom script which is dependent on dropzone.js – something like

    wp_enqueue_script('my-script',"/var/www/vhosts/jtc.ae/httpdocs/pre/wp/wp-content/themes/Amazing_japan_HP/frameworks/dropzone/myscript.js",array('jquery','dropzone'));
    

    or possibly

    wp_enqueue_script('my-script',"/var/www/vhosts/jtc.ae/httpdocs/pre/wp/wp-content/themes/Amazing_japan_HP/frameworks/dropzone/wordpress_compability.js",array('jquery','dropzone'));
    

    if wordpress_compability.js depends on dropzone

    if you fix the scripts you are enqueing perhaps wp_localize_script() will find it’s first argument better formed. or perhpas the problem lies with the next two arguments (the data).

    edit:
    also this stuff is not right:

    <script src="<?php bloginfo('template_url'); ?>/frameworks/dropzone/dropzone.js"></script>
    <script src="<?php bloginfo('template_url'); ?>/frameworks/dropzone/wordpress_compability.js"></script>
    <script src="<?php bloginfo('template_url'); ?>/frameworks/dropzone/wordpress_compability.php"></script>
    

    is that in your header.php?

    first of all wp_enqueue_script() already adds the scripts to the html so this may cause confusion. secondly you can’t include a .php script like that. the <script src="... syntax is for .js files.

    to include php you need something like @include(‘wordpress_compability.php’), probably in your functions.php

Comments are closed.