Upload File Error with AJAX Form in WordPress – Specified file failed upload test

I am stuck since couple of days on the same issues, i hope someone can help with this. I have tried mutiple functions i found on stackoverflow but it seems i am doing something completely wrong!

I need to upload a file to wordpress library with a form submission on the frontend using AJAX.

This is the form:

function shortcode__new_upload_file() {
    /**
     * @var     WP_User $current_user
     */
    $current_user = $GLOBALS['current_user'];

    ob_start(); ?>

    <form id="form-upload" method="POST" enctype="multipart/form-data">
        <div class="custom-file">
            <input type="file" name="imagefile" class="custom-file-input" id="imageFile">

          <label class="custom-file-label" for="imageFile">Choose file</label>
        </div>
        <textarea class="form-control" id="imageMessage" name="message"></textarea>
        <button type="submit" class="btn btn-outline-secondary submit" id="process-upload"><?php _e('Save'); ?></button>
        <button type="reset" class="btn btn-outline-danger" id="cancel-upload"><?php _e('Cancel'); ?></button>
     </form>


    <?php
    $html = ob_get_clean();

    return $html;
}
// Ads shortcode so you can use the form anywhere you want.
add_shortcode( 'new_upload_file', 'shortcode__new_upload_file' );

AJAX call:

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

    //$('#process-upload').on('click', function(e){
    $("#form-upload").on('submit',function(e){
        e.preventDefault();
        var el_form = $('#form-upload')

        //var data = new FormData();
        //data.append('action', 'new_upload_file');
        //data.append('imageFile', $('input[type=file]')[0].files[0] );
        //data.append('message', $('#imageMessage').val() );

        // If form is valid run function
        new_upload_file()

        // Ajax request.
        function new_upload_file() {

            $.ajax({
            url: localized_new_upload_file.admin_ajax_url,
            type: 'POST',
            //contentType: false,
            enctype: 'multipart/form-data',
            //processData: false,
            //data: data,
            dataType: 'json',
            data: {
                action: 'new_upload_file', // Set action without prefix 'wp_ajax_'.
                form_data: el_form.serialize()
            },
            cache: false,
            success: function(response){
                console.log(response);
                window.alert('Done!');
            }
            });
        }
  
    });

});

function upload_file_callback(){

    
    // get entered form data
    parse_str( $_POST['form_data'], $form_data );

    $postarr = array();
    
    // merge all array and make new array, now get data for each input like following: $form_data[LUBUVNA_PREFIX.'from']
    $postarr = array_merge( $postarr, $form_data );

    
    if ( ! function_exists( 'wp_handle_upload' ) ) {
        require_once( ABSPATH . 'wp-admin/includes/file.php' );
    }

    //$uploadedfile = isset($_FILES['imagefile']) ? $_FILES['imagefile'] : '';
    
    $uploadedfile = $form_data['imagefile']; //$_FILES['imagefile'];

    $upload_overrides = array( 'test_form' => false );

    $movefile = wp_handle_upload( $uploadedfile, $upload_overrides ); 

    if ( $movefile && !isset( $movefile['error'] ) ) {
        $feedback = "File is valid, and was successfully uploaded.n";
        var_dump( $movefile);
    } else {
        /**
         * Error generated by _wp_handle_upload()
         * @see _wp_handle_upload() in wp-admin/includes/file.php
         */
        $feedback = print_r($movefile, true);
    }
    
    
    // send email with details
    $headers = [
     'MIME-Version: 1.0',
     'From: [e-mail]',
     'Content-Type: text/html; charset=UTF-8'
    ];
    $headers = implode("rn", $headers);
    wp_mail('[e-mail]','Script Ran','<br>FEEDBACK:<br>'.$feedback. '<br>FORM Array:<br>' . print_r($postarr, true) ,$headers);
    
}

//add_action('wp_ajax_nopriv_new_upload_file', 'upload_file_callback');
add_action( 'wp_ajax_new_upload_file', 'upload_file_callback' );

So the form data is showing up in the email like following after form submission:

FEEDBACK:
Array ( [error] => Specified file failed upload test. ) NASH TEXT: 
FORM Array:
:Array ( [message] => car ) 

I am not getting the data of the imagefile field. and that’s why i guess i am getting an error Specified file failed upload test.

Whats wrong with my function.. i have by the way tried $_FILES / $_POST but there is something i am missing.

EDIT JS File

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

    
    //$("#form-upload").submit(function(e){
    $("#form-upload").on('submit',function(e){
        e.preventDefault();
        

        var $this = $(this);
        var formData = new FormData( $this[0] );
        formData.append('action', 'new_upload_file');
        //formData.append('_nonce', $('input[name*="my_token"]') ).val();
        //formData.append('_nonce', $this.closest('form').find('.nonce').val();
        formData.append('_nonce', $(this).find('input[name*="my_token"]').val() );
        
        
        // Ajax request.
       
            $.ajax({
            url: localized_new_upload_file.admin_ajax_url,
            type: 'POST',
            data: { 'form_data' :  formData },
            contentType: false,
            //enctype: 'multipart/form-data',
            cache: false,
            processData: false,
            success: function(response){
                    console.log(response);
                    window.alert('Done!');
                }
            });

        return false;
    });
});

FORM

    <form id="form-upload" method="POST" enctype="multipart/form-data">
        <div class="custom-file">
            <!--<input type="file" name="imagefile" class="custom-file-input" id="imageFile" accept="image/*">-->
            <input type="file" name="imagefile" class="custom-file-input" id="imageFile">

          <label class="custom-file-label" for="imageFile">Choose file</label>
          <!--<input name="my_token" class="nonce" value="<?php //echo wp_create_nonce("my_token"); ?>" type="hidden">-->
        <?php wp_nonce_field( SECURE_AUTH_SALT, 'my_token' ) ?>
        </div>
        <textarea class="form-control" id="imageMessage" name="message"></textarea>
        <button type="submit" class="btn btn-outline-secondary submit" id="process-upload"><?php _e('Save'); ?></button>
        <button type="reset" class="btn btn-outline-danger" id="cancel-upload"><?php _e('Cancel'); ?></button>
     </form>

PHP

function script__new_upload_file() {
    wp_enqueue_media();
    wp_enqueue_script(
        'new_upload_file',
        get_stylesheet_directory_uri(). '/ajax-file-upload.js',
        array( 'jquery' ),
        '1.0.0',
        true
    );
    
    wp_localize_script( 'new_upload_file', 'localized_new_upload_file', array( 
        'admin_ajax_url' => admin_url( 'admin-ajax.php' ),
        //'security'  => wp_create_nonce( 'my-special-string' )
    ));
}
// Use wp_enqueue_scripts action hook so you can correctly localize the script with admin ajax URL.
add_action( 'wp_enqueue_scripts', 'script__new_upload_file' );



function upload_file_callback(){

        
    // get entered form data
    parse_str( $_POST['form_data'], $form_data );

    $postarr = array();
    
    // merge all array and make new array, now get data for each input like following: $form_data[LUBUVNA_PREFIX.'from']
    $postarr = array_merge( $postarr, $form_data );

    
    if ( ! function_exists( 'wp_handle_upload' ) ) {
        require_once( ABSPATH . 'wp-admin/includes/file.php' );
    }

    //$uploadedfile = isset($_FILES['imagefile']) ? $_FILES['imagefile'] : '';

    $uploadedfile = $form_data['imagefile']; //$_FILES['imagefile'];
    //print_r($uploadedfile);
    // die();

    $upload_overrides = array( 'test_form' => false );

    $movefile = wp_handle_upload( $uploadedfile, $upload_overrides ); 

    if ( $movefile && !isset( $movefile['error'] ) ) {
        $feedback = "File is valid, and was successfully uploaded.n";
        var_dump( $movefile);
    } else {
        /**
         * Error generated by _wp_handle_upload()
         * @see _wp_handle_upload() in wp-admin/includes/file.php
         */
        $feedback = print_r($movefile, true);
    }
    
    
    
    // send email with details
    $headers = [
     'MIME-Version: 1.0',
     'From: [e-mail]',
     'Content-Type: text/html; charset=UTF-8'
    ];
    $headers = implode("rn", $headers);
    wp_mail('[e-mail]','Script Ran','<br>FEEDBACK:<br>'.$feedback. '<br>FORM Array:<br>' . print_r($postarr, true) ,$headers);
    
}

add_action('wp_ajax_nopriv_new_upload_file', 'upload_file_callback');
add_action( 'wp_ajax_new_upload_file', 'upload_file_callback' );

Answer

When using the FormData object in $.ajax, you pass it directly as the data field

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

    
    //$("#form-upload").submit(function(e){
    $("#form-upload").on('submit',function(e){
        e.preventDefault();
        
        var formData = new FormData( this );
        formData.append('action', 'new_upload_file');
        //formData.append('_nonce', $('input[name*="my_token"]') ).val();
        //formData.append('_nonce', $this.closest('form').find('.nonce').val();
        formData.append('_nonce', $(this).find('input[name*="my_token"]').val() );
        
        
        // Ajax request.
       
            $.ajax({
                url: localized_new_upload_file.admin_ajax_url,
                type: 'POST',
                data: formData,  //<----- Pass the formdata object only
                contentType: false,
                cache: false,
                processData: false,
                success: function(response){
                    console.log(response);
                    window.alert('Done!');
                }
            });

        return false;
    });
});

In PHP

$_FILES['imagefile'] will give you access to the file
$_POST['message'] will give you access to the textarea text
$_POST['_nonce'] will give you access to the nonce
$_POST['action'] will give you access to the action