0

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

Community
  • 1
  • 1
izolate
  • 1,590
  • 4
  • 22
  • 35

1 Answers1

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.

Josh Mein
  • 28,107
  • 15
  • 76
  • 87
  • I agree my error function is silly. Using the one you gave me, it just refreshes the page but not before displaying this in the console: `Uncaught TypeError: Cannot ready property 'Message' of undefined` – izolate Jul 31 '12 at 13:53
  • 1
    @muppethead Thats interesting. I have updated my answer with something else I have done before. – Josh Mein Jul 31 '12 at 13:56
  • Ah ha! Yes, your edit proved helpful. The error said `progressHandlingFunction` was not defined. So, I added the progress handling function and now the form doesn't return the error function. But instead I get a 500 Internal Server Error. Is that because I'm working locally with MAMP? – izolate Jul 31 '12 at 14:01
  • Actually, forget that. My php file had badly commented out text that caused the 500 ISE. Everything now works as it should. Thanks for your help Josh – izolate Jul 31 '12 at 14:04