What I'm doing:
Publishing a post that has some of it's fields checked via AJAX.
The problem:
The images posted are not being saved. All the rest of the infos are. The image is not uploaded to the server.
What I tried:
I tried using $_POST, and it was working like that, before I had to check stuff with AJAX, and had to use .preventDefault() and .submit(). Since I had to use AJAX, tried a bunch of stuff, including the fileReader().
What's being done in the code:
When the user clicks on the 'submit', I get the fields that have to be checked via JS, pass them with AJAX to PHP, if everything is ok, I return them to the JS and activate the .submit() with the form ID.
The part of the code that has the 'input=file':
<input class="text-input file-input img_destaque" name="img_destaque" type="file" id="img_destaque" multiple="false" />
<input type="submit" class="btn-pub-ad cadastro-anuncio" id="publicar" name="publicar" value="PUBLICAR">
<?php wp_nonce_field( 'publicar','nonce_anuncio' ); ?>
The part of the code that has the submit button:
<input type="submit" class="btn-pub-ad cadastro-anuncio" id="publicar" name="publicar" value="PUBLICAR">
The part of the code that handles the info and sends via AJAX, using the formData() as sugested in the answers:
function adAnuncio(e){
e.preventDefault();
var form = document.getElementById('criar_anuncio');
var formData = new FormData(form);
formData.append( 'action', 'publicar_anuncio' );
$.ajax({
type: "POST",
url: clocal.ajaxurl,
dataType: "html",
processData: false,
contentType: false,
data: formData,
}).success(function (data) {
$data = $(data);
$("#mensagem").html($data);
var anchor = $('#mensagem');
$('html,body').animate({scrollTop: anchor.offset().top},'slow');
if ($('.linha-sucesso').length){
$('#criar_anuncio').submit();
}
});
}
The part of the code that gets what was sent via AJAX and includes the PHP that has the code to create the post:
// if user is logged in
add_action('wp_ajax_publicar_anuncio', 'publish_anuncio');
// if user is not logged in
add_action('wp_ajax_nopriv_publicar_anuncio', 'publish_anuncio');
function publish_anuncio() {
if ( count( $errors->get_error_messages() ) < 1 ) :
echo '<div class="linha-sucesso">';
echo '<img class="ico-sucesso" src="'. get_template_directory_uri() .'/assets/images/success-icon.png">';
echo 'Seu anúncio foi cadastrado correctamente.';
echo '</div>';
include 'inc/inserir-anuncios-verificacao.php';
endif;
wp_die();
The part where the file should be handled, stored and attached to the post:
$post_type = 'cadastro_anuncios';
//the array of arguements to be inserted with wp_insert_post
$postStatus = 'publish';
$new_post = array(
'post_title' => $title,
'post_status' => $postStatus,
'post_type' => $post_type,
);
//treating the images
// These files need to be included as dependencies when on the front end.
require_once( ABSPATH . 'wp-admin/includes/image.php' );
require_once( ABSPATH . 'wp-admin/includes/file.php' );
require_once( ABSPATH . 'wp-admin/includes/media.php' );
$img_id01 = media_handle_upload( $_POST['img_destaque'], $postID );
update_post_meta($postID, 'img_id01', $img_id01);
It doesnt work. Even if I remove the .submit(), no error is printed or showed on the console. If I keep the .submit() everything gets saved properly except for the images.