Laravel: Validation keeps failing for array of images uploaded by Vue

I have an array of files being uploaded by the Vue frontend. I am trying to validate them before they are uploaded and if they failed the Validator, return the error as json for the frontend. However, even when I upload a valid image, I get the error The image field is required. When I checked the network request in Chrome, the Headers show file[]: binary and when I click 'view source' under the headers, it shows:

------WebKitFormBoundaryu3sdahHmJlPW
Content-Disposition: form-data; name="file[]"; filename="logo.png"
Content-Type: image/png

. I am not sure what I am doing wrong.

* Controller *

 public function uploader(Request $request)

    {
        $validator = \Validator::make($request->all(), [
            'image' => 'required',
            'image.*' => 'image|mimes:jpeg,png,jpg,gif,svg|max:2048',
        ]);

        if ($validator->fails()) {
            return response()->json([
                'status'    => 0,
                'message'   => $validator->messages(),
            ]);
        }

        if ($request->hasFile('file')) {
            $files = $request->file('file');
            $stack = [];
            foreach ($files as $file) {
                $fileName = Storage::put('/bucket', file_get_contents($file->getRealPath()), ['visibility' => 'public']);
                array_push($stack, $fileName);
            }
            return response()->json($stack);
        }
    }

* Vue *

uploadImages: function() {
    if (!this.files) {
        return;
    }

    let formData = new FormData();
    this.files.forEach((x,index) => {
        formData.append("file[]", x)
    });

    axios.post('/uploader', formData, {
        headers: {
            'Content-Type': 'multipart/form-data',
        }
    })
    .then(response => {
        ///
    })
}

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/2VZf0Ck
via IFTTT