0

I have a Wordpress website that users can submit posts from the front-end. Im trying to integrate dropzone.js so users can submit images via drag and drop and sort images from featured image and gallery images kinda like what craigslist has.

My question is how do I get the featured image to get added to a file input

<input id="fileUpload" type="file" name="feat-img" accept="image/*" value="">

and the gallery image get added to

<input id="gallery-photo-add" type="file" name="muti_files[]"  accept="image/*"  multiple>

Heres my code

Html

 <div class="dropzone" drop-zone="" id="file-dropzone"></div>
    <ul class="visualizacao sortable dropzone-previews" style="border:1px solid #000"></ul>
    <div class="preview" style="display:none;">
        <li>
            <div class="dz-preview dz-file-preview">
            <img data-dz-thumbnail />
            <input id="fileUpload" type="file" name="feat-img" accept="image/*" value="">
            <input id="gallery-photo-add" type="file" name="muti_files[]"  accept="image/*"  multiple> 
            </div>
        </li>  
    </div>

Javascript

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js"></script>
<script type="text/javascript">
var $ = jQuery
    $(document).ready(function(){
         $('.sortable').sortable();
    });
    $.getScript('https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/min/dropzone.min.js',function(){         
          $('#file-dropzone').dropzone({ 
            url: "/",
            maxFilesize: 100,
            paramName: "uploadfile",
            maxThumbnailFilesize: 99999,
            previewsContainer: '.visualizacao', 
            previewTemplate : $('.preview').html(),
            init: function() {
              this.on('completemultiple', function(file, json) {

               $('.sortable').sortable('enable');

              });

              this.on('success', function(file, json) {
                alert('aa');
              });

              this.on('addedfile', function(file) {
                console.log('File1',file);
              });

              this.on('drop', function(file) {
                console.log('File2',file);
              }); 
            }
          });
        });
        $(document).ready(function() {});
</script>

PHP

if( ! empty( $_FILES ) ){
    $featured_image = $_FILES['feat-img'];
    $attachment_id = upload_user_file( $featured_image, $post_id);
    $files = $_FILES['upload_attachment'];
    foreach ($files['name'] as $key => $value) {
        if ($files['name'][$key]) {
            $filee = array(
                'name'     => $files['name'][$key],
                'type'     => $files['type'][$key],
                'tmp_name' => $files['tmp_name'][$key],
                'error'    => $files['error'][$key],
                'size'     => $files['size'][$key]
            );
            $_FILES = array("upload_attachment" => $filee);
            foreach ($_FILES as $filee => $array) {
                $newupload = my_handle_attachment($filee, $post_id);
            }
        }
    }
}
if ( ! empty( $_FILES['muti_files'] )  ) {
        $files = $_FILES['muti_files'];
        foreach ($files['name'] as $key => $value){
            if ($files['name'][$key]){
                $file = array(
                'name' => $files['name'][$key],
                'type' => $files['type'][$key],
                'tmp_name' => $files['tmp_name'][$key],
                'error' => $files['error'][$key],
                'size' => $files['size'][$key]
                );
            }
            $_FILES = array("muti_files" => $file);
            $i=1;
                foreach ($_FILES as $file => $array) {
                      if ($_FILES[$file]['error'] !== UPLOAD_ERR_OK) __return_false();
                        require_once(ABSPATH . "wp-admin" . '/includes/image.php');
                        require_once(ABSPATH . "wp-admin" . '/includes/file.php');
                        require_once(ABSPATH . "wp-admin" . '/includes/media.php');
                        $attachment_id = media_handle_upload($file, $post_id);
                        $vv .= $attachment_id . ",";
                        $i++;
                }
                update_post_meta($post_id, '_product_image_gallery',  $vv);
        }
    }

All this works fine if i dont use dropzone.js and just the <input type="file"> here is a codepen so you can see what im trying to do https://codepen.io/T-SEA/pen/OdqQOw

Tcmxc
  • 481
  • 1
  • 7
  • 23
  • 2
    _"My question is how do I get the featured image to get added to a file input"_ You can append multiple `File` objects to a single `FormData` instance. Not sure what the issues is? – guest271314 Feb 19 '19 at 23:33
  • Thats kinda my question. How do i append multiple files to a single FormData instance? – Tcmxc Feb 19 '19 at 23:34
  • `const fd = new FormData(); for (let i = 0; i < 2; i++) { fd.append("file" + i, new File([i], 'file' + i, {type:"text/plain"})) } console.log([...fd.entries()])` – guest271314 Feb 19 '19 at 23:37
  • Where should this be placed? – Tcmxc Feb 19 '19 at 23:49
  • You can create an HTML ` – guest271314 Feb 19 '19 at 23:51

0 Answers0