Dropzone.js doesn't work in wordpress frontend posting

Question

I'm building a front-end posting form on my WP site. The simplified code of my form is as follows:

<form id="new_post" name="new_post" method="post" action="/add-property-query/" enctype="multipart/form-data">
								<!-- post name -->
								<fieldset name="name">
									<label for="title">Name:</label>
									<input type="text" id="title" value="TestName" tabindex="5" name="title" />
								</fieldset>
					
								<!-- images - _thumbnail_id -->
								<div class="images">
							<label for="boss_thumbnail">Front of the Bottle</label>
										<input type="file" name="boss_thumbnail" id="boss_thumbnail" tabindex="25" />
								</div>
				
					
								<fieldset class="submit">
									<button type="submit" value="Post Review" tabindex="40" id="submit" name="submit">Submit data and files!</button>
								</fieldset>
					
								<input type="hidden" name="action" value="new_post" />
								<?php wp_nonce_field( 'new-post' ); ?>
							</form>

I use an image uploading input which works perfectly. That is the part of the server side code, which processes the image upload:

//INSERT OUR MEDIA ATTACHMENTS
	        if (!function_exists('wp_generate_attachment_metadata')){
	            require_once(ABSPATH . "wp-admin" . '/includes/image.php');
	            require_once(ABSPATH . "wp-admin" . '/includes/file.php');
	            require_once(ABSPATH . "wp-admin" . '/includes/media.php');
	        }
	         if ($_FILES) {
	            foreach ($_FILES as $file => $array) {
	                if ($_FILES[$file]['error'] !== UPLOAD_ERR_OK) {
	                    return "upload error : " . $_FILES[$file]['error'];
	                }
	            }
	            $boss_thumbnail = media_handle_upload('boss_thumbnail', $pid); // set cover
	        }
	        if ($boss_thumbnail > 0){
	            //set the image as thumbnail:
	            update_post_meta($pid,'_thumbnail_id',$boss_thumbnail);
	        }// END SAVING FILE

I need exactly the same uploading mechanism with my other form fields working using dropzone.js. As they require on their site (dropzonejs.com), I included <script src="./path/to/dropzone.js"></script> and added dropzone class to the form. My HTML now is the following:

<script src="./path/to/dropzone.js"></script>
<form id="new_post" name="new_post" method="post" action="/add-property-query/" class="dropzone" enctype="multipart/form-data">
								<!-- post name -->
								<fieldset name="name">
									<label for="title">Name:</label>
									<input type="text" id="title" value="TestName" tabindex="5" name="title" />
								</fieldset>
					
								<!-- images - _thumbnail_id -->
								<div class="images">
							<label for="boss_thumbnail">Front of the Bottle</label>
										<input type="file" name="boss_thumbnail" id="boss_thumbnail" tabindex="25" />
								</div>
				
					
								<fieldset class="submit">
									<button type="submit" value="Post Review" tabindex="40" id="submit" name="submit">Submit data and files!</button>
								</fieldset>
					
								<input type="hidden" name="action" value="new_post" />
								<?php wp_nonce_field( 'new-post' ); ?>
							</form>

Dropzone found the form element with the class dropzone, automatically attached itself to it. On the front-end everything works fine. On the site they say that the uploaded files can be handled just as if there would have been a html input like this:

<input type="file" name="file" />

So, on the server I change $boss_thumbnail = media_handle_upload('boss_thumbnail', $pid); to the $boss_thumbnail = media_handle_upload('file', $pid); but then WP returns the following error: Catchable fatal error: Object of class WP_Error could not be converted to string in formatting.php on line 1025.

I even used this article (https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone) to "Combine normal form with Dropzone" but it didn't help me. The final HTML code is as follows:

<link rel="stylesheet" href="http://eventboss.org/wp-content/themes/Travelo/css/dropzone.css">
	<script src="http://eventboss.org/wp-content/themes/Travelo/js/dropzone.js"></script>
	<script>
		jQuery(document).ready(function() {
				Dropzone.options.new_post = { // The camelized version of the ID of the form element
			
			  // The configuration we've talked about above
			  autoProcessQueue: false,
			  uploadMultiple: false,
			  parallelUploads: 100,
			  maxFiles: 100,
			
			  // The setting up of the dropzone
			  init: function() {
			    var myDropzone = this;
			
			    // First change the button to actually tell Dropzone to process the queue.
			    this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
			      // Make sure that the form isn't actually being sent.
			      e.preventDefault();
			      e.stopPropagation();
			      myDropzone.processQueue();
			    });
			
			    // Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
			    // of the sending event because uploadMultiple is set to true.
			    this.on("sendingmultiple", function() {
			      // Gets triggered when the form is actually being sent.
			      // Hide the success button or the complete form.
			    });
			    this.on("successmultiple", function(files, response) {
			      // Gets triggered when the files have successfully been sent.
			      // Redirect user or notify of success.
			    });
			    this.on("errormultiple", function(files, response) {
			      // Gets triggered when there was an error sending the files.
			      // Maybe show form again, and notify user of error
			    });
			  }
			
			}
		})
	</script>

<form id="new_post" name="new_post" method="post" action="/add-property-query/" class="dropzone" enctype="multipart/form-data">
							<!-- post name -->
							<fieldset name="name">
								<label for="title">Name:</label>
								<input type="text" id="title" value="TestName" tabindex="5" name="title" />
							</fieldset>
			
				
							<fieldset class="submit">
								<button type="submit" value="Post Review" tabindex="40" id="submit" name="submit">Submit data and files!</button>
							</fieldset>
				
							<input type="hidden" name="action" value="new_post" />
							<?php wp_nonce_field( 'new-post' ); ?>
						</form>

On the server-side I made only one change mentioned above. How can I make my script process image upload correctly with dropzone.js script used?

Answer 1

Change

<input type="file" name="boss_thumbnail" id="boss_thumbnail" tabindex="25" />

to

<input type="file" name="file" id="boss_thumbnail" tabindex="25" />