javascript - Dropzone.js doesn't work in wordpress frontend posting -
i'm building front-end posting form on wp site. simplified code of form 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 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 , files!</button> </fieldset> <input type="hidden" name="action" value="new_post" /> <?php wp_nonce_field( 'new-post' ); ?> </form>i use image uploading input works perfectly. part of server side code, processes 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 $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 image thumbnail: update_post_meta($pid,'_thumbnail_id',$boss_thumbnail); }// end saving filei need same uploading mechanism other form fields working using dropzone.js. require on site (dropzonejs.com), included <script src="./path/to/dropzone.js"></script> , added dropzone class form. html 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 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 , files!</button> </fieldset> <input type="hidden" name="action" value="new_post" /> <?php wp_nonce_field( 'new-post' ); ?> </form>dropzone found form element class dropzone, automatically attached it. on front-end works fine. on site uploaded files can handled if there have been html input this:
<input type="file" name="file" /> so, on server change $boss_thumbnail = media_handle_upload('boss_thumbnail', $pid); $boss_thumbnail = media_handle_upload('file', $pid); wp returns following error: catchable fatal error: object of class wp_error not converted string in formatting.php on line 1025.
i used article (https://github.com/enyo/dropzone/wiki/combine-normal-form-with-dropzone) "combine normal form dropzone" didn't me. final html code 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 = { // camelized version of id of form element // configuration we've talked above autoprocessqueue: false, uploadmultiple: false, paralleluploads: 100, maxfiles: 100, // setting of dropzone init: function() { var mydropzone = this; // first change button tell dropzone process queue. this.element.queryselector("button[type=submit]").addeventlistener("click", function(e) { // make sure form isn't being sent. e.preventdefault(); e.stoppropagation(); mydropzone.processqueue(); }); // listen sendingmultiple event. in case, it's sendingmultiple event instead // of sending event because uploadmultiple set true. this.on("sendingmultiple", function() { // gets triggered when form being sent. // hide success button or complete form. }); this.on("successmultiple", function(files, response) { // gets triggered when files have been sent. // redirect user or notify of success. }); this.on("errormultiple", function(files, response) { // gets triggered when there error sending files. // maybe show form again, , 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 , files!</button> </fieldset> <input type="hidden" name="action" value="new_post" /> <?php wp_nonce_field( 'new-post' ); ?> </form>on server-side made 1 change mentioned above. how can make script process image upload correctly dropzone.js script used?
change
<input type="file" name="boss_thumbnail" id="boss_thumbnail" tabindex="25" /> to
<input type="file" name="file" id="boss_thumbnail" tabindex="25" /> 
Comments
Post a Comment