File upload fails when using ajax submit with return false

Question

I have a form that has a simple file input.

<form id="uploadFile" name="uploadFile" action="addFile.php" method="POST" enctype="multipart/form-data">
    <input type="hidden" value="" name="uploadWUID" id="uploadWUID">
    <p>Please upload a signed and completed write-up in PDF format.  Please file the hardcopy of the write-up per company policy.</p>
    <div class="input-group" style="margin-bottom:7px;">
        <span class="input-group-btn">
            <span class="btn btn-primary btn-file">
                Browse&hellip; <input type="file" id="reportImport" name="reportImport">
            </span>
        </span>
        <input type="text" class="form-control" readonly>
    </div>
</form>

There is some local javascript that puts the filename in the text input, but the text input is not used in the PHP file.

The uploadWUID is set dynamically and is passed to add the uploaded file to a specific record in a database.

When I submit the form it works just fine. My browser redirects to addFile.php, success is echoed out, the file is moved to the correct directory and the database is updated.

My issues comes when I add return false to my ajax form submission. I get an error back from the php file stating it couldn't find the index when processing $filename = $_FILES['reportImport']['name']; and my upload/database update fails.

$('#uploadFile').submit(function() {
    $.ajax({
        data: $(this).serialize(),
        type: $(this).attr('method'),
        url: $(this).attr('action'),
        success: function(response) {}
    });
    return false;
});

notice that javascript is executed synchronously - try to return your false value inside of the success handler: success: function(response){ return false } — messerbill
– messerbill, Commented Apr 22, 2016 at 11:34
@messerbill, that allows the form to submit correctly but doesn't stop the page from directing to the addFile.php page. I need the return false to keep from redirecting the browser. Want to stay on my current page. — Pieter
– Pieter, Commented Apr 22, 2016 at 11:54
so don't use submit but a simple ajax call after clicking a button. You do not need to submit forms to send data to the server since you use ajax ;) — messerbill
– messerbill, Commented Apr 22, 2016 at 11:59

Manish Jesani · Accepted Answer · 2016-04-22 11:57:44Z

2

Change script code

$('#uploadFile').submit(function() {
        var formData = new FormData($(this)[0]);              
        $.ajax({
          data: formData,
          type: $(this).attr('method'),
          url: $(this).attr('action'),
          processData: false,  // tell jQuery not to process the data
          contentType: false,  // tell jQuery not to set contentType
          success: function(response) {
             console.log(response);
             alert(response);
             return false
          }
        });
     return false;
 });

answered Apr 22, 2016 at 11:57

Manish Jesani

1,3555 gold badges22 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Pieter Over a year ago

This worked! Thank you very much. My question now is why? Is it the processData and contentType, that I was missing with my call?

Manish Jesani Over a year ago

@Pieter It’s imperative that you set the contentType option to false, forcing jQuery not to add a Content-Type header for you, otherwise, the boundary string will be missing from it. Also, you must leave the processData flag set to false, otherwise, jQuery will try to convert your FormData into a string, which will fail.

Pieter Over a year ago

Thank you for explaining, makes sense. I couldn't for the life of me understand why it would complete as along as I wasn't trying to stay on my current page.

Collectives™ on Stack Overflow

File upload fails when using ajax submit with return false

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related