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