How do I Upload/Import Form (Input) Files via. Ajax function?

Question

I keep running into an issue getting the file(s) added/switched to ajax so that the server ajax handler can deal with the rest. How can I get the $_FILES to be passed the same as with the default action (built into form elements)?

Updated

I was originally sending a mixed object, but modified it to use the FormData Object only. Using FormData Objects is a solution for uploading files instead of being dependent on JS/jQuery plugins to accomplish the task.

HTML Form

<form id="frmImport" name="frmImport" method="post" enctype="multipart/form-data" >
    <input id="fileImportData" name="importData" type="file" />
    <br/>
    <button id="btnImport" type="submit" >Import</button>
</form>

JavaScript

jQuery(document).ready(function($){
    //This is already setup and sent from the server side, and is
    // is used to prevent unauthorized users from uploading data.
    var importnonce = "3x4mpl3f4k3n0nc3"; 

    $('#frmImport').submit(function(e)
    {
        e.preventDefault();
        //CHECK ERRORS ON USER SIDE, IF TRUE, END OPERATIONS.
        if (import_errors())
        {
            return false;
        }
        import_db();
        return false;
    });

    function import_errors()
    {
        if ($('#fileImportData').val() == '')
        {
            alert('No file(s) selected. Please choose a JSON file to upload.');
            return true;
        }
        if ($('#fileImportData').val() != '')
        {
            var ext = $('#fileImportData').val().split('.').pop().toLowerCase();
            if($.inArray(ext, ['json']) == -1) 
            {
                alert('Invalid file type. Please choose a JSON file to upload.');
                return true;
            }
        }
        return false;
    }

    function import_db()
    {
        //REMOVED - Everything was switched over to be added to the FormData Objects
        //var ajaxData = { 
        //    action : 'ajax_handler_import',
        //    _ajax_nonce : importNonce
        //};

        //This is where issues occurred, I couldn't get the file added to ajax
        // and preserved in $_FILE, and this isn't the only method I've tried 
        // to add data. However, this was the most promising.

        //MODIFIED - Everything is appended to the FormData Object instead.
        //ajaxData.formD = new FormData();
        //jQuery.each($('#fileImportData')[0].files, function(i, file) {
        //    ajaxData.formD.append('file-'+i, file);
        //});

        var formData = new FormData();
        jQuery.each($('#fileImportData')[0].files, function(i, file) {
            formData.append('uploadFile-'+i, file);
        });
        formData.append('action', 'ajax_handler_import');
        formData.append('_ajax_nonce', importNonce);

        jQuery.ajax({
            url: ajaxurl,
            type: 'POST',
            cache: false,
            contentType: false,
            processData: false,

            //MODIFIED - From ajaxData to formData
            data: formData,

            beforeSend: function(jqXHR, settings){
                console.log("Haven't entered server side yet.");
            },
            dataFilter: function(data, type){
                //May need/want to create a function to parse the data. Which includes
                // PHP Errors that would normally break the AJAX function with a JS 
                // Error with no sign of the PHP Error message. Normally want to 
                // try/catch php errors.
                console.log("JSON string echoed back from server side.");
            },
            success: function(data, textStatus, jqXHR){
                console.log("Back from server-side!");
                //Checking errors that may have been caught on the server side that
                // normally wouldn't display in the error Ajax function.
                if (data.msg != 'success')
                {
                    alert(data.error);
                }
            },
            error: function(jqXHR, textStatus, errorThrown){
                console.log("A JS error has occurred.");
            },
            complete: function(jqXHR, textStatus){
                console.log("Ajax is finished.");
            }
        });  
    }
});

PHP Server/Handler

<?php
class server
{
    function ajax_import_handler()
    {
        check_ajax_referer("ajax_handler_import");

        $rtnData = new stdClass();
        $rtnData->msg = 'success'; //For signifying Server errors
        $rtnData->error = ''; //For displaying custom error messages or using the try/catch method

        //Do Stuff
        foreach ($_FILES as $key => $value)
        {
            //GET FILE CONTENT
            $file_array[$key] = json_decode(file_get_contents($value['tmp_name']));
        }
        //Do More Stuff

        //Add Stuff to $rtnData

        echo json_encode($rtnData);
    }
}
?>

Answer 1

I haven't tried but i think you need to add FormData object directly as data parameter. Something like this

    var ajaxData = new FormData();

    ajaxData.append( 'action', 'ajax_handler_import' );
    ajaxData.append( '_ajax_nonce', importNonce );
    // or maybe skip the nonce for now

    jQuery.each($('#fileImportData')[0].files, function(i, file) {
        ajaxData.append('file-'+i, file);
    });

The rest of your code goes as it is

Answer 2

Ajax in the traditional sense is XMLHttpRequest, which does not allow you encode and send local files to a server.

The common ways of doing uploading through "ajax" means, is to either use a Flash swf to handle the uploading on the same page, or to use a form that has a target of an invisible 1x1 iframe.

Here is a very similar question with a good answer to see how you can do that