Wordpress upload frontend form not uploading images - wordpress

Question

I'm working on a frontend form in wordpress to create a custom post type and upload a picture attached to that post.
Below is my code so far. The post is created, but problem is that the images are not uploaded to the server either attached to that post. On the other hand I would like the images to be pre-visualized before sending the form, in the same way wordpress works for the admin area.
if ( 'POST' == $_SERVER['REQUEST_METHOD'] && !empty( $_POST['new_cpt_action'] ) && $_POST['new_cpt_action'] == "new_cpt" && isset( $_POST['new_cpt-form'] ) && wp_verify_nonce( $_POST['new_cpt-form'], 'create_new_cpt' ) ){
if (isset($_POST['submit'])) {
$error = "";
if (!empty($_POST['s_name'])) {
$s_name = $_POST['s_name'];
} else {
$error = 'Please insert a name';
}
if (empty($error)) {
$new_post = array(
'post_title' => $s_name,
'post_status' => 'pending',
'post_type' => 'my_cpt',
);
//Save the post
$post_id = wp_insert_post($new_post);
if( ! empty( $_FILES ) ) {
foreach( $_FILES as $file ) {
if( is_array( $file ) ) {
$attachment_id = wp_insert_attachment($file, $post_id);
}
}
}
//Redirect to the new post
if ( $post_id ) {
wp_redirect(home_url('site/'.$post_id));
exit;
}
}
}
}
And the form:
<form id="new_post" name="new_post" method="post" action="" class="" enctype="multipart/form-data">
<input type="text" id="s_name" name="s_name"/>
<input type="file" name="s_image" id="s_image" tabindex="25" />
<input type="submit" value="Create post and upload image" id="submit" name="submit"/>
<input type="hidden" id="new_cpt_action" name="new_cpt_action" value="new_cpt" />
</form>
If you could please let me know what I'm missing would be great.
Thanks

Answer 1

I managed to include the attachments in the wp media library with this code:
if ( $_FILES ) {
$files = $_FILES["file"];
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 ("file" => $file);
foreach ($_FILES as $file => $array) {
$newupload = frontend_handle_attachment( $file, $post_id );
}
}
}
}
Which calls the function frontend_handle_attachment:
function frontend_handle_attachment($file_handler,$post_id) {
// check to make sure its a successful upload
if ($_FILES[$file_handler]['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');
$attach_id = media_handle_upload( $file_handler, $post_id );
// Set featured image
set_post_thumbnail($post_id, $attach_id);
return $attach_id;
}
This works fine with a simple input in the form as follows:
<input type="file" name="file[]" multiple="multiple" />
As for the progress bar and pre-visualization of the images, I'm trying to implement dropzone, but no luck so far. At least the simple approach works.