Question

I’m creating a setup wizard using AJAX. It’s a multi-step form submission with 6 total steps. Steps 1-5 work fine, they are just form fields and only submit text. The final step, step 6, will allow the user to upload 7 images. This step does not work. I get a 500 Internal Server Error

Am I passing the image data correctly via JSON? Is there something else I’m doing wrong or forgetting?

The relevant code is below:

HTML (For step 6 only)

<form action="/ajax/wizard.php/<?php echo $userName ?>?step=3" 
class="defaultRequest" enctype="multipart/form-data" method="post">

<input type="hidden" name="token" value="<?php echo $token; ?>"/>

<fieldset>
    <p><label>Profile Picture</label>
    <input type="file" name="pPic" value="" /></p>

    <p><label><a href="#help-username" class="show_helper"><span>(?)</span>
    Pic 1</a></label> <input type="file" name="Album1" value="" />
    </p>

    <p><label><a href="#help-password" class="show_helper"><span>(?)</span>
    Pic 2</a></label><input type="file" name="Album2" value="" />
    </p>

    <p><label>Pic 3</label>
    <input type="file" name="Album3" value="" /></p>

    <p><label>Pic 4</label>
    <input type="file" name="Album4" value="" /></p>

    <p><label>Pic 5</label>
    <input type="file" name="Album5" value="" /></p>

    <p><label>Pic 6</label>
    <input type="file" name="Album6" value="" /></p>

</fieldset>

<fieldset>
     <p><label>&nbsp;</label>
     <button type="submit"><span>Upload Images</span></button></p>
</fieldset>

JS

$.ajax({
type: 'POST',
url: requestUrl,
data: $(this).serialize(),
dataType: 'json',
success: function(data) {

            if(data.response){
                $('div.errormsg').remove();
                $(eventHeadline).html(data.eventHeadline);
                console.log(data.eventHeadline);
                //$(eventDate).html(data.eventName);

                if(data.step){
                    openStep(data.step);
                }else{
                        openStep('next');
                }
            }else{
                $('div.errormsg').remove();
                $('<div class="errormsg">'+data.message+"</div>").insertBefore(form);
            }

Answer 1

File fields don’t serialize conveniently to JSON, in order to upload them you would need to create a FormData object which can be uploaded using jQuery so long as you prevent jQuery from processing the data object using processData: false. This will only work with a few of the newest browsers though: http://caniuse.com/#search=formdata

In order to support file uploads with jQuery for older browsers / IE, your best bet is to find a plugin that uploads the files using a standard POST and ties it back to the jQuery callback – this should provide you with a few: https://www.google.co.uk/search?q=jquery+file+upload+plugin