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

January 2, 2018

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

Comments

12 responses to “Upload file in wordpress media library with jquery ajax from frontend form”

January 7, 2018

Senthil

Really explained well with an example

Reply
1. January 7, 2018
  
  Ajay Malhotra
  
  thank you Senthil
  
  Reply
August 15, 2018

Hugh

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
1. August 16, 2018
  
  Ajay Malhotra
  
  Hi Hugh, where you want to insert parent post id?
  to image?
  
  Reply
  1. August 16, 2018
    
    Hugh
    
    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
August 16, 2018

Hugh

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
August 16, 2018

Hugh

sorry:

Reply
1. August 17, 2018
  
  Ajay Malhotra
  
  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
July 9, 2019

Duke

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

Reply
1. July 11, 2019
  
  Ajay Malhotra
  
  Yes duke,
  you can get the image url with
  
  wp_get_attachment_image_src($attach_id, ‘thumbnail’);
  
  Thank you
  
  Reply
July 15, 2020

Gabriel

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
1. July 15, 2020
  
  Ajay Malhotra
  
  I will again check and I will update you. Thanks
  
  Reply