Home Ajax Upload file in wordpress media library with jquery ajax from frontend form

Upload file in wordpress media library with jquery ajax from frontend form

by therichpost
12 comments
How to add custom meta title and meta description in Wordpress?

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

You may also like

12 comments

Senthil January 7, 2018 - 11:09 am

Really explained well with an example

Reply
Ajay Malhotra January 7, 2018 - 4:32 pm

thank you Senthil

Reply
Hugh August 15, 2018 - 4:56 pm

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 😉

Reply
Ajay Malhotra August 16, 2018 - 5:33 am

Hi Hugh, where you want to insert parent post id?
to image?

Reply
Hugh August 16, 2018 - 10:32 am

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);

},

});

});
});

Reply
Hugh August 16, 2018 - 3:26 pm

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 );

Reply
Hugh August 16, 2018 - 3:29 pm

sorry:

Reply
Ajay Malhotra August 17, 2018 - 5:18 am

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.

Reply
Duke July 9, 2019 - 11:03 pm

Hi AJ, is it possible to get the img url(s) after the upload process is down?

Reply
Ajay Malhotra July 11, 2019 - 5:33 pm

Yes duke,
you can get the image url with

wp_get_attachment_image_src($attach_id, ‘thumbnail’);

Thank you

Reply
Gabriel July 15, 2020 - 12:38 am

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.

Reply
Ajay Malhotra July 15, 2020 - 4:42 am

I will again check and I will update you. Thanks

Reply

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.