Laravel how to validate multiple files (images) using FormRequest

Question

As part of a form, I want to submit up to five images and validate them in a FormRequest with custom error messages.

The file submit part of the form looks like this:

<div id="dzone" class="form-group dropzone {{ $errors->has('images') ? ' has-error' : '' }}">
    <div class="fallback">
        <label for="images[]">Select up to five images...</label>
        <input name="images[]" type="file" multiple/>
    </div>
    @if ($errors->has('images'))
        <span class="help-block">{{ $errors->first('images') }}</span>
    @endif
</div>

My FormRequest looks like this:

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class StoreListingFormRequest extends FormRequest
{
/**
 * Determine if the user is authorized to make this request.
 *
 * @return bool
 */
public function authorize()
{
    return true;
}

/**
 * Get the validation rules that apply to the request.
 *
 * @return array
 */
public function rules()
{
    return [
        'title' => 'required|max:255',
        'body' => 'required|max:2000',
        'price' => 'required|max:100|regex:/^\d{1,13}(\.\d{1,4})?$/',
        'contact_details' => 'required',
        "images"    => "required|array|min:1|max:5",
        'images.*' => 'required|mimes:jpg,jpeg,png,bmp|max:2000',
        'category_id' => [
            'required',
            \Illuminate\Validation\Rule::exists('categories', 'id')->where(function ($query) {
                $query->where('usable', true);
            })
        ],
        'area_id' => [
            'required',
            \Illuminate\Validation\Rule::exists('areas', 'id')->where(function ($query) {
                $query->where('usable', true);
            })
        ]
    ];
}

public function messages()
{
    return [
        'contact_details.required' => 'At least one method of contact is required for your advert.',
        'images.min' => 'Please upload one or more images',
        'images.max' => 'A maximum of five images are allowed',
        'images.*.mimes' => 'Only jpeg,png and bmp images are allowed',
        'images.*.max' => 'Sorry! Maximum allowed size for an image is 2MB',
    ];
}
}

There several things not working with the images validation:

First, if I set min:1 on the images array it does not return an error message if I submit no images but if I set it to 2 it returns my custom error message.

I cannot get any error messages to return for images..mimes' or 'images..max'

what am I doing wrong here?

Answer 1

I figured it out

   public function rules()
{
    return [
        'title' => 'required|max:255',
        'body' => 'required|max:2000',
        'price' => 'required|max:100|regex:/^\d{1,13}(\.\d{1,4})?$/',
        'contact_details' => 'required',
        "images"    => "required|array|min:1|max:5",
        'images.*' => 'required|mimetypes:image/jpeg,image/png,image/bmp|max:2000',
        'category_id' => [
            'required',
            \Illuminate\Validation\Rule::exists('categories', 'id')->where(function ($query) {
                $query->where('usable', true);
            })
        ],
        'area_id' => [
            'required',
            \Illuminate\Validation\Rule::exists('areas', 'id')->where(function ($query) {
                $query->where('usable', true);
            })
        ]
    ];
}

public function messages()
{
    return [
        'contact_details.required' => 'At least one method of contact is required for your advert.',
        'images.required' => 'Please upload one or more images',
        'images.max' => 'A maximum of five images are allowed',
        'images.*.mimetypes' => 'Only jpeg,png and bmp images are allowed',
        'images.*.max' => 'Sorry! Maximum allowed size for an image is 2MB',
    ];
}

and then in the view:

 <div id="dzone" class="form-group dropzone {{ ($errors->has('images') || $errors->has('images.*')) ? ' has-error' : '' }}">
                            <div class="fallback">
                                <label for="images[]">Select up to five images...</label>
                                <input name="images[]" type="file" multiple />
                            </div>
                            @if ($errors->has('images'))
                                <span class="help-block">
                                    {{ $errors->first('images') }}
                                </span>
                            @endif
                            @if ($errors->has('images.*'))
                                <span class="help-block">
                                    {{ $errors->first('images.*') }}
                                </span>
                            @endif
                        </div>

Answer 2

Files or any multi input validation errors should be checked the key name.

Their key names come dynamically with numbers(IE: images.0) and all of them contains the keyword 'images' so that is the point which we can use to catch those errors.

So, simple check should do the work:

 @if($errors->has('images.*'))
      @foreach($errors->get('images.*') as $key => $error)
           <div class="error">{{ $errors->first($key) }}</div>
      @endforeach
 @endif