Fix dropzone.js to allow it to work for front end wordpress posting script
Budget: $10 – $30 USD
I am looking for a developer to fix the issue with dropzone.js for my front end WordPress posting script. The specific issue I am experiencing is that it is not uploading files. The issue seems to be related to dropzone trying to upload files before the post is submitted but wordpress doesnt process anythign until a post is submitted. I dont care if you make dropzone just a fancy uploader, provide a similar solution, or if you can make dropzone work as intended I just need users to be able to upload files and then upload more before submitting.
Requirements:
- Experience with dropzone.js and WordPress
- Familiarity with the latest version of WordPress
- Ability to troubleshoot and fix issues related to file uploading
Here is the relevant code. If you see the issue. Let me know and I'll pay you to resolve it. I'm not going to share file access and deal with a ton of debugg on this.
function usp_enqueue_scripts() {
global $post;
if (is_a($post, 'WP_Post') && has_shortcode($post->post_content, 'users-submit-posts')) {
wp_enqueue_editor();
wp_enqueue_script('dropzone', 'https://unpkg.com/dropzone@5/dist/min/dropzone.min.js', [], false, false);
wp_enqueue_style('dropzone-css', 'https://unpkg.com/dropzone@5/dist/min/dropzone.min.css');
}
}
add_action('wp_enqueue_scripts', 'usp_enqueue_scripts');
<div id="dropzone" class="dropzone"></div>
<input type="submit" name="submit-post" value="Submit Post">
<script type="text/javascript">
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("#dropzone", {
url: "/wp-admin/admin-ajax.php",
autoProcessQueue: false,
addRemoveLinks: true,
maxFiles: 10,
acceptedFiles: "image/*",
params: {
action: 'handle_dropzone_upload'
}
});
document.getElementById('usp-form').addEventListener('submit', function(e) {
e.preventDefault();
var formData = new FormData(this);
formData.append('action', 'usp_handle_submission'); // Specify the action name
myDropzone.files.forEach(function(file) {
formData.append('user-submitted-cover-photos[]', file);
});
jQuery.ajax({
url: '/wp-admin/admin-ajax.php',
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(response) {
console.log(response); // Debugging line
if(response && response.success && response.data && response.data.redirect_url) {
window.location.href = response.data.redirect_url;
} else {
console.error('Unexpected response:', response);
}
},
error: function(jqXHR, textStatus, errorThrown) {
console.error(textStatus, errorThrown);
}
});
});
</script>
/**
* Handles the post submission process once the form is filled and submitted by the user.
* It validates the form, creates a new post, handles media uploads, saves custom fields, and redirects the user to the newly created post.
*
* @hooked init
*/
function usp_handle_submission() {
if (usp_is_form_submitted()) {
$post_id = usp_create_post();
if (is_wp_error($post_id)) {
wp_send_json_error(array('error' => $post_id->get_error_message()));
exit;
}
if (isset($_FILES['user-submitted-cover-photos'])) {
usp_handle_media_uploads($post_id, $_FILES['user-submitted-cover-photos']);
}
usp_save_custom_fields($post_id);
wp_send_json_success(array('redirect_url' => get_permalink($post_id)));
exit;
}
}
add_action('wp_ajax_usp_handle_submission', 'usp_handle_submission'); // Hook for logged-in users
add_action('wp_ajax_nopriv_usp_handle_submission', 'usp_handle_submission')
/**
* Checks if the post submission form has been submitted and if it's a valid submission.
*
* @return bool True if form is validly submitted, false otherwise.
*/
function usp_is_form_submitted() {
return isset($_POST['submit-post'], $_POST['_usp_nonce'])
&& wp_verify_nonce($_POST['_usp_nonce'], 'usp_handle_submission')
&& is_user_logged_in();
}
/**
* Creates a new post based on the data submitted in the form.
* The post title and content are sanitized. The post is set to 'pending' status by default and assigned to category ID 94.
*
* @return int|WP_Error Post ID on success, WP_Error on failure.
*/
function usp_create_post() {
// Create post object
$new_post = array(
'post_title' => sanitize_text_field($_POST['user-submitted-title']),
'post_content' => wp_kses_post($_POST['user-submitted-content']),
'post_status' => 'publish', // You can set to 'publish' if you want to publish immediately
'post_type' => 'post', // Change this to your desired post type if different
'post_author' => get_current_user_id(),
'post_category' => array(94) // Assigning to category with ID 94
);
return wp_insert_post($new_post);
}
Requirements:
- Experience with dropzone.js and WordPress
- Familiarity with the latest version of WordPress
- Ability to troubleshoot and fix issues related to file uploading
Here is the relevant code. If you see the issue. Let me know and I'll pay you to resolve it. I'm not going to share file access and deal with a ton of debugg on this.
function usp_enqueue_scripts() {
global $post;
if (is_a($post, 'WP_Post') && has_shortcode($post->post_content, 'users-submit-posts')) {
wp_enqueue_editor();
wp_enqueue_script('dropzone', 'https://unpkg.com/dropzone@5/dist/min/dropzone.min.js', [], false, false);
wp_enqueue_style('dropzone-css', 'https://unpkg.com/dropzone@5/dist/min/dropzone.min.css');
}
}
add_action('wp_enqueue_scripts', 'usp_enqueue_scripts');
<div id="dropzone" class="dropzone"></div>
<input type="submit" name="submit-post" value="Submit Post">
<script type="text/javascript">
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("#dropzone", {
url: "/wp-admin/admin-ajax.php",
autoProcessQueue: false,
addRemoveLinks: true,
maxFiles: 10,
acceptedFiles: "image/*",
params: {
action: 'handle_dropzone_upload'
}
});
document.getElementById('usp-form').addEventListener('submit', function(e) {
e.preventDefault();
var formData = new FormData(this);
formData.append('action', 'usp_handle_submission'); // Specify the action name
myDropzone.files.forEach(function(file) {
formData.append('user-submitted-cover-photos[]', file);
});
jQuery.ajax({
url: '/wp-admin/admin-ajax.php',
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(response) {
console.log(response); // Debugging line
if(response && response.success && response.data && response.data.redirect_url) {
window.location.href = response.data.redirect_url;
} else {
console.error('Unexpected response:', response);
}
},
error: function(jqXHR, textStatus, errorThrown) {
console.error(textStatus, errorThrown);
}
});
});
</script>
/**
* Handles the post submission process once the form is filled and submitted by the user.
* It validates the form, creates a new post, handles media uploads, saves custom fields, and redirects the user to the newly created post.
*
* @hooked init
*/
function usp_handle_submission() {
if (usp_is_form_submitted()) {
$post_id = usp_create_post();
if (is_wp_error($post_id)) {
wp_send_json_error(array('error' => $post_id->get_error_message()));
exit;
}
if (isset($_FILES['user-submitted-cover-photos'])) {
usp_handle_media_uploads($post_id, $_FILES['user-submitted-cover-photos']);
}
usp_save_custom_fields($post_id);
wp_send_json_success(array('redirect_url' => get_permalink($post_id)));
exit;
}
}
add_action('wp_ajax_usp_handle_submission', 'usp_handle_submission'); // Hook for logged-in users
add_action('wp_ajax_nopriv_usp_handle_submission', 'usp_handle_submission')
/**
* Checks if the post submission form has been submitted and if it's a valid submission.
*
* @return bool True if form is validly submitted, false otherwise.
*/
function usp_is_form_submitted() {
return isset($_POST['submit-post'], $_POST['_usp_nonce'])
&& wp_verify_nonce($_POST['_usp_nonce'], 'usp_handle_submission')
&& is_user_logged_in();
}
/**
* Creates a new post based on the data submitted in the form.
* The post title and content are sanitized. The post is set to 'pending' status by default and assigned to category ID 94.
*
* @return int|WP_Error Post ID on success, WP_Error on failure.
*/
function usp_create_post() {
// Create post object
$new_post = array(
'post_title' => sanitize_text_field($_POST['user-submitted-title']),
'post_content' => wp_kses_post($_POST['user-submitted-content']),
'post_status' => 'publish', // You can set to 'publish' if you want to publish immediately
'post_type' => 'post', // Change this to your desired post type if different
'post_author' => get_current_user_id(),
'post_category' => array(94) // Assigning to category with ID 94
);
return wp_insert_post($new_post);
}