Wordpress AJAX File Upload

Question

I am having trouble saving the uploaded file to the Wordpress database:

Here is the HTML:

<div id="portfolio-container">
<form method="post" id="genealogist-code-upload" enctype="multipart/form-data">
    <div>
        <span class="col-xs-1 check <?php if($locked1 == 0){ echo 'fa fa-times-circle-o'; } else { echo 'fa fa-check-circle'; } ?> "></span>
        <h1 class="col-xs-6">1. Genealogist's Code</h1>
        <?php if($locked1 == 0){ ?>
            <label for="file-field" class="btn add-file-btn col-xs-2 text-center">Add File</label>

            <input type="file" name="file" id="file-field" style="display:none;">
    <!-- </div>
    <div> -->
            <input type="submit" id="1" class="col-xs-2 app-upload-btn">
            <button class="col-xs-1 delete upload-1-delete"><span class="fa fa-trash"></span></button>
        <?php } ?>
    </div>
</form>

Here is the JS:

jQuery(document).ready( function($) {

$('.app-upload-btn').on('click', function(e){
    e.preventDefault();
    $current = $(this);

    // var file_data = $('.file-field').prop('files')[0];
    var file_data = $('#file-field').val();

    var strconfirm = confirm('Are you sure? This cannot be undone.');

    if (strconfirm == true && file_data != undefined) {
        var form_data = new FormData();
        form_data.append('file', file_data);
        $.ajax({
            url: ajaxurl,
            type: 'POST',
            dataType: 'json',
            contentType: false,
            processData: false,
            data: {
                'action': 'save_portfolio',
                'portfolio_num': $(this).attr('id'),
                // 'form_data': form_data
            },
            success: function( data ) {
                $current.siblings(".check").removeClass("fa-times-circle-o").addClass("fa-check-circle");
                $current.css("display", "none");
                $current.siblings('.delete').css("display", "none");
                $current.siblings('.add-file-btn').css("display", "none");
            },
            error: function( error ) {
                console.log('error');
            }
        })
    } else {
        alert('please reupload.');
    }
})

Here is the PHP code where I am having trouble accessing the uploaded file:

function bcg_portfolio_submission() {

$user = wp_get_current_user();
$portfolio_num = $_POST['portfolio_num'];
$portfolio_locked = 'portfolio_locked_'. $portfolio_num;

$form_data = print_r($_FILES['form_data']);

update_user_meta( $user->ID, $portfolio_locked, true);
wp_send_json_success($form_data);

die();

}

add_action( 'wp_ajax_nopriv_save_portfolio', 'bcg_portfolio_submission' );
add_action( 'wp_ajax_save_portfolio', 'bcg_portfolio_submission');

I'd like to send a data object to be accessed via PHP. Can I just add data : form_data as an element of the object? How do I access this form data in php? Do I use the global $_FILE variable? If so, can you provide an example of what this would look like?

Answer 1

Try below answer in Js and PHP code, it is worked for me for upload file from ajax call.

// Javascript code //

var formdata = new FormData();
 var file = jQuery("#file-field")[0].files[0];
 formdata.append('action', 'ajax_call_function');
 formdata.append('file', file);
 formdata.append('nonce', nonce);
jQuery.ajax({
        url:ajaxurl,  // your ajax URL
        data: formdata,
        dataType: 'json',
        type: 'POST',                   
        contentType: false,
        processData: false,

        success: function(response)
        {
            //console.log('check respose');       
        }

in PHP code.

you can get path in ajax call-back function at PHP side by global value.

$filename=$_FILES['file']['tmp_name'];

Answer 2

To upload image using ajax, you have to create a form like:

var form_data = new FormData();
form_data.append('file', file_data);
// In the same way append all the html elements value in the form

now send this form in data like:

data : form_data

Try with this approach.

You can get the formdata values in php like:

$_FILES['file']     // for file
$_REQUEST['index']  // for other html elements