Hello, welcome to therichpost.com. In this post, I will tell you how to Upload file in wordpress media library with jquery ajax from frontend form? WordPress is the best cms like I always say. We will also use jquery ajax in it. In my many posts, I always talk about jquery. Jquery helps me lot in my code. I can easily say that jQuery is problem solving.
For file uploading with ajax, we will use formData method.
We will use wp_ajax hook in wordpress for file upload in wordpress media.
Again In this post we will do file uploading in wordpress media library with jquery ajax from frontend form:
Here is the html form code:
<form method=”post”>
<input type=”file” id=”user-file”>
<input type=”submit” name=”Submit” class=”default-btn”>
</form>
Here is the jquery code:
<script type=”text/javascript”>
$(document).ready(function(){
$(“.default-btn”).click(function(event){
event.preventDefault();
var ajaxurl = “<?php echo admin_url(‘admin-ajax.php’); ?>”;
var formData = new FormData();
formData.append(‘updoc’, $(‘input[type=file]’)[0].files[0]);
formData.append(‘action’, “questiondatahtml”);
$.ajax({
url: ajaxurl,
type: “POST”,
data:formData,cache: false,
processData: false, // Don’t process the files
contentType: false, // Set content type to false as jQuery will tell the server its a query string request
success:function(data) {
alert(data);},
});
});
});
</script>
And Now Final, here is the wordpress code to Upload file in wordpress media library with jquery ajax from frontend form and you need to add this hook into your wordpress theme’s functions.php file:
add_action( ‘wp_ajax_questiondatahtml’, ‘questiondatahtml_update’ );
add_action( ‘wp_ajax_nopriv_questiondatahtml’, ‘questiondatahtml_update’ );
function questiondatahtml_update() {
if ( $_FILES ) {
require_once(ABSPATH . “wp-admin” . ‘/includes/image.php’);
require_once(ABSPATH . “wp-admin” . ‘/includes/file.php’);
require_once(ABSPATH . “wp-admin” . ‘/includes/media.php’);
$file_handler = ‘updoc’;
$attach_id = media_handle_upload($file_handler,$pid );
}echo “You are done!!”;
wp_die();
}
There are so many hooks in wordpress and i will let you know all. Please do comment if you any query related to this post. Thank you. Therichpost.com
Really explained well with an example
thank you Senthil
GREAT!
1 question:
I am using this within a post and would like it attached to this post.
How can I insert the post parent id for the upload?
Thanks, just what i was looking for 😉
Hi Hugh, where you want to insert parent post id?
to image?
This is my functions.php and the following works fine:
// ************************************************
// Your actions:
// ************************************************
add_action( ‘wp_ajax_questiondatahtml’, ‘questiondatahtml_update’ );
add_action( ‘wp_ajax_nopriv_questiondatahtml’, ‘questiondatahtml_update’ );
function questiondatahtml_update() {
if ( $_FILES ) {
require_once(ABSPATH . “wp-admin” . ‘/includes/image.php’);
require_once(ABSPATH . “wp-admin” . ‘/includes/file.php’);
require_once(ABSPATH . “wp-admin” . ‘/includes/media.php’);
$file_handler = ‘updoc’;
// ************************************************
// I have manually inserted the known parent $post_id (113) here
// ************************************************
$attach_id = media_handle_upload($file_handler,’113′ );
// ************************************************
// update parent post to use uploaded attachment as feat. img.
// ************************************************
update_post_meta(‘113′,’_thumbnail_id’,$attach_id);
}
echo “You are done!!”;
wp_die();
}
// ************************************************
// This is one of my actions which is called from an existing post:
// ************************************************
add_action( ‘edd-custom-action’, ‘render_edd_custom_action’, 10, 3 );
function render_edd_custom_action( $form_id, $post_id, $form_settings ) {
$value = ”;
if ( $post_id ) {
$value = get_post_meta( $post_id, ‘edd-custom-action’, true );
}
?>
// ************************************************
// i want to pass this parent $post_id to your upload function:
// I have tried using a hidden input with value of parent $post ID
// and appending to FormData() so i can retrieve the variable
// but i cannot get it to work. Any help very much appreciated.
// ************************************************
$(document).ready(function(){
$(“.default-btn”).click(function(event){
event.preventDefault();
var ajaxurl = “”;
var formData = new FormData();
formData.append(‘updoc’, $(‘input[type=file]’)[0].files[0]);
formData.append(‘action’, “questiondatahtml”);
$.ajax({
url: ajaxurl,
type: “POST”,
data:formData,cache: false,
processData: false, // Don’t process the files
contentType: false, // Set content type to false as jQuery will tell the server its a query string request
success:function(data) {
alert(data);
},
});
});
});
I managed to get it to work.
I’m sure this is not the proper way to do it but it works for now.
I need to learn a bit more about how wordpress works…
$ppid = $post_id;
<input type="hidden" id="ppid" value="”>
formData.append(‘ppid’, $(‘input[type=hidden]’)[0].value);
$ppid = $_POST[‘ppid’];
$attach_id = media_handle_upload($file_handler,$ppid );
sorry:
Thank you for your comments and there are lots of codes related to wordpress here on my blog and you can ask your query also and good to see that, you solved problem yourself.
Hi AJ, is it possible to get the img url(s) after the upload process is down?
Yes duke,
you can get the image url with
wp_get_attachment_image_src($attach_id, ‘thumbnail’);
Thank you
It seems so simple, but I did the exact same, and the ajax function really calls the php function, as I can see in the developer tool in the browser, and the answer of “echo” in the alert. But nothing happen, the media is not added to the library.
I will again check and I will update you. Thanks