Laravel 4无法将输出从jQuery路由到Controller

Question

This is a Laravel 4 image manipulation project. I am going round in circles trying to solve this conundrum, which I am sure has an elementary solution. The user chooses some images, previews them and then clicks to upload.

The problem is that handleForm's output (the FormData object) does not get routed to the ImageController for the rest of the image handling. On clicking nothing happens. Debugging shows that the FormData object (data in xhr.send(data)) contains the images that the user specified.

The relevant bits: 1 The user clicks to upload.

<input type="button" value="Upload" id="go"/>

1. In the jQuery the .click event starts handleForm function:

$("#go").on("click", handleForm); 

1. In handleForm the storedFiles array contains the users chosen images after previewing them.

function handleForm(e) {
        e.preventDefault();
        var data = new FormData();
        
        
        for(var i=0, len=storedFiles.length; i<len; i++) {
            data.append('files', storedFiles[i]);             
        }
        
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'upload', true);
        
        xhr.onload = function(e) {
            if(this.status == 200) {
                console.log(e.currentTarget.responseText);  
                alert(e.currentTarget.responseText);
            }
        }
        xhr.send(data);
    }

1. In Routes

Route::post('upload', array(
    'as' => 'upload',
    'uses' => 'ImageController@upload'
    
    ));

1. In ImageController:

<?php

    class ImageController extends BaseController {

    public function upload(){   
        
        $files = Input::all('files');

        $gallery =  str_random(12);
           

        foreach ($files as $file) {

            $validation = Image::validateImage(array('file'=> $file));

            ...................

This is the first time I have tried to incorporate jQuery in Laravel and I need some help!

</div>

Answer 1

The answer in this case was to change the jQuery to make files into array files[] like:

for(var i=0, len=storedFiles.length; i<len; i++) {
            data.append('files[]', storedFiles[i]);             
        }

I couldn't find this solution anywhere despite hours of searching, it was just a trial and error approach.