Question

I’m trying to incorporate some code from Stack user DannYo’s comment here, however my version of his code doesn’t seem to run. The error and the “beforesend” functions return each time.

HTML

<form action="" method="post" enctype="multipart/form-data">
    <input type="file" id="file">
    <input type="email" id="sender" name="sender" required>
    <input type="email" id="receiver" name="receiver" required>
    <input type="text" id="message" name="message">
    <button id="send" class="button">Send it</button>
</form>

JavaScript

$("form").on("submit", function() {

    var formData = new FormData($('form')[0]);

    $.ajax({
        url: 'upload.php',  //server script to process data
        type: 'POST',
        xhr: function() {  // custom xhr

            myXhr = $.ajaxSettings.xhr();

            if (myXhr.upload) { // check if upload property exists
                myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // for handling the progress of the upload
            }

            return myXhr;

        },

        //Ajax events
        beforeSend: function() { console.log("before send function works"); },
        success: function(e) {
            console.log(e);
        },
        error: function() { console.log("error function works"); },

        // Form data
        data: formData,

        //Options to tell JQuery not to process data or worry about content-type
        cache: false,
        contentType: false,
        processData: false
    });

    return false;

});

PHP

For testing purposes, the upload.php file only has <?php echo "success"; ?>

Using Chrome’s network developer tool, I don’t see my file being transferred anywhere. Anybody see a glaring hole in my code? Thanks

Answer 1

If your error function is being called, then the answer is most likely within its result. Please check what error is being returned as displaying error function works does you no good.

error: function(xhr, status, error) {
    alert(xhr.responseText);
    // OR
    alert(status + " : " + error);
}

Edit: Also to note, I believe you need to handle the saving of file that you are trying to upload. This tutorial for uploading files in php may be useful.