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?
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() 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
and the second one should be the path to your custom script which is dependent on dropzone.js – something like
or possibly
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:
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