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> </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);
}