AjaxJqueryWordpress Tricks

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

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

Views

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

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

10 Comments

  • 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 😉

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

    • 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.

Leave a Reply

Positive SSL