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

Question

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.

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?

You pasted too much. Ask a question about a specific piece of code, where you're struggling some issue. — Matt Komarnicki, Nov 07 '15 at 07:36
I did paste the specific line 8 where I'm having trouble. Just for those who are interested I added the full code at the bottom of my question. If I only ask them about line 8, people will say I pasted too few anyway... — mesqueeb, Nov 07 '15 at 07:49
@mesqueeb - in PHP, the line number you're given is where the error comes up, but it's often caused by something on the previous line. In this case, there's no semi-colon ending the previous line, your array declaration. Basically, if you get that error, you need to include the preceding code, but anything after it can probably be omitted. — andrewsi, Nov 08 '15 at 03:03

jopfre · Accepted Answer · 2015-11-07T07:50:35.143

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

Thank you ! I see that that is indeed an improper way to include the php file. I'm trying to figure out what the OP meant with this line: " I found using admin-post.php file is pretty amazing. So I initialized the drophandler variable prior to my dropzone initialization as follows..." Does that mean I need to add that bit of code to the admin-post.php file? — mesqueeb, Nov 07 '15 at 10:10
@mesqueeb I am really sorry for the confusion. What I meant is I found that buitin file `(amin-post.php)` is very handy in terms to handle to form data. You don't have to worry about that. Simply enqueue the scripts, localize the environment variable and put those actions somewhere that is loaded when wp loads. No extra work is required. Get back if you can't make work. — maksbd19, Nov 21 '15 at 02:14
thanks for your help. Sorry I marked it correct many years later. Your upvote on my question is much appreciated!! : D — mesqueeb, Apr 13 '19 at 00:20

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

1 Answers1