Frontend posting with thumbnail with AJAX WordPress
- SOLVED
I need to post from the front end with thumbnail image.
I'm able to create the post now but I can't set the featured image.
This is my code:
<form action="" class="propertySubmit" enctype="multipart/form-data">
<input type="text" class="property_name" name="property_name">
<input type="file" name="featured_image">
<button>Submit</button>
</form>
$('.propertySubmit').on('submit', function(e) {
e.preventDefault();
var property_name = $(this).find('.property_name').val();
var property_city = $(this).find('.property_city').val();
var property_cover = $(this).find('.property_cover').val();
var post_id = $(this).find('.post_id').val();
// ajax codes for submission
$.ajax({
type: 'POST',
context: this,
url: property_ajax.property_ajax_url,
data: {
"action": "submit_property",
"property_name": property_name,
"property_city": property_city,
"property_cover": property_cover,
"post_id": post_id
},
success: function(data) {
alert('It worked');
}
});
});
<code>
function property_ajax_submit() {
// Obtenemos los valores
$property_name = trim( $_POST['property_name'] );
$property_city = trim( $_POST['property_city'] );
$property_city_zone = trim( $_POST['property_city_zone'] );
$property_cover = trim( $_POST['property_cover'] );
if ( ! empty( $_FILES ) ) {
foreach ( $_FILES as $file => $array )
$newupload = insert_attachment( $file, $post_id, $property_cover );
}
global $post;
$user_id = get_current_user_id();
// Crear publicacion.
$my_post = array(
'post_type' => 'casa',
'post_title' => $property_name,
'post_content' => '',
'post_status' => 'publish',
'post_author' => $user_id,
);
// Insert the post into the database.
$wp_error = 'sorry post has not been inserted';
$post_id = wp_insert_post($my_post, true);
if ($post_id == 0) {
echo 'there is a error';
} else {
$tag1 = array($property_city);
wp_set_post_terms($post_id, $tag1, 'city');
//echo 'there is no error';
function insert_attachment($file_handler,$post_id,$setthumb='false') {
// 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 );
if ($setthumb) update_post_meta($post_id,'_thumbnail_id',$attach_id);
return $attach_id;
}
set_post_thumbnail($post_id, $attach_id);
}
}
add_action('wp_ajax_submit_property', 'property_ajax_submit');
add_action('wp_ajax_nopriv_submit_property', 'property_ajax_submit');
function propertyCityZones() {
$term_id = trim($_POST['term']);
$taxonomy_name = 'city';
$term_children = get_term_children( $term_id, $taxonomy_name );
echo '<ul id="propertyCityZones" class="nav nav-pills">';
foreach ( $term_children as $child ) {
$term = get_term_by( 'id', $child, $taxonomy_name );
echo '<li><a href="#" class="text-uppercase" data-value="' . $term->term_id . '">' . $term->name . '</a></li>';
}
echo '</ul>';
exit();
}
add_action('wp_ajax_load_term_posts', 'propertyCityZones');
add_action('wp_ajax_nopriv_load_term_posts', 'propertyCityZones');
<code>
Answers (3)
Francisco Javier Carazo Gil answers:
Good morning,
You have to use some code to upload images with AJAX:
http://stackoverflow.com/questions/19447435/ajax-upload-image
Alvaro Rosado comments:
I have even more questions hehe...
this is my data section
data: {
"action": "submit_property",
"property_name": property_name,
"property_city": property_city,
"property_cover": property_cover,
"post_id": post_id
},
in the link you gave me I should use dat like this
data:formData,
Francisco Javier Carazo Gil comments:
Please read it and fill your code with this one: https://www.formget.com/ajax-image-upload-php/
Alvaro Rosado comments:
I'm sorry but I can't understand how to implement what I already have with what you're pointing me to do.
I'm already submitting post, with title and custom tax terms, the only thing I need is to upload and set the featured image also from the front.
Francisco Javier Carazo Gil comments:
Alvaro,
Sorry but for only $5 I can't do more.
Alvaro Rosado comments:
Francisco, How much more? Sorry if $5, I assumed I had most of it and missing some lines of code.
Arnav Joy answers:
how you are sending image upload to property insert function ?
Alvaro Rosado comments:
I thought I could achieve that on the JS section
var property_cover = $(this).find('.property_cover').val();
Arnav Joy comments:
no it will not work, you can use jquery serialize function to send all data to your function and then process there.
Alvaro Rosado comments:
Sorry bro, still couldn't figured out. Could you please share an example?
Cesar Contreras answers:
Have you read this documentation?
https://codex.wordpress.org/Function_Reference/wp_insert_attachment
Alvaro Rosado comments:
Hola Cesar, no, no la he leído pero lo haré. Muchas gracias.
Alvaro Rosado comments:
Cesar, eres un genio. Aún no logro subir la image, pero ya está insertando "algo", me imagino que es porque en el data me marca como "fakepath" la url del archivo, pero ya es una gran avance. Muchas gracias. Mi correo está en mi descripción, voy a resolver este último detalle pero lo más seguro es que te de a ti la respuesta.