[FIXED] How to fix 'The file failed to upload.' error using any validation for image upload - Laravel 5.7

Issue

I am using Laravel 5.7

I am attempting to upload an image file and validating its upload using built in laravel validation. It keeps responding with 'The file failed to upload.'

I am using AJAX to upload this data. My form has enctype="multipart/form-data" set.

I have already figured out to include the CSRF token with the AJAX request.

I have already fixed the php.ini max_file_size issue, and the files I am testing with are far under 10MB.

If I upload a text file (as an example), and with validation set to required|image|max:10000 it will correctly prevent the file from uploading and respond with 'File must be an image.'

If I disable all validation, the file is uploaded just fine.

I cannot think of anything else I may be doing wrong. Please help as this as my project is at a halt at the moment.

Form HTML:

<form method="post" class="dropzone" action="{{ route('images') }}" enctype="multipart/form-data"
                  data-nopants-load="dropzone{'transformImage':true,'acceptedFiles-1':'image/jpg','previewsContainer':'#dropzone-previews'}">
                @method('post')
                @csrf
                <div class="dz-border">
                    <div class="background"></div>
                    <div class="border"></div>
                </div>
                <div class="dz-message margins-auto _font-size-large"><span>Drop Images here or <span class="_underline">Click</span> to Upload.</span></div>
                <div class="fallback flex-col">
                    <div class="self-center margin-bottom">
                        <input name="file" type="file" class="form-input" multiple />
                    </div>
                    <button type="submit" class="button -call">Upload</button>
                </div>
            </form>

UploadImageFormRequest.php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

use Illuminate\Support\Facades\Auth;

class UploadImageFormRequest extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize()
    {
        return Auth::check();//user()->can('create', Organization::class);
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array
     */
    public function rules()
    {
        return ['file' => 'required|image|mimes:jpeg,bmp,png'];
    }
}

UploadImagesController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Requests\UploadImageFormRequest;

class UploadImagesController extends Controller
{
    public function __construct()
    {
        $this->middleware('auth:user,admin');
    }

    public function store(UploadImageFormRequest $request){
    //Wont get here...
    }
}

Solution

i think the multiple attribute turn it into array try remove the multiple attribute

<input name="file" type="file" class="form-input" multiple />

to this

<input name="file" type="file" class="form-input"/>

and if you want to have multiple images you should do this

<input name="file[]" type="file" class="form-input" multiple />

and your validation like this

        return [
      'file' => 'array',
      'file.*' => 'image|mimes:jpeg,bmp,png'
];

Answered By - Ahmed Aboud

Answer Checked By - Clifford M. (PHPFixing Volunteer)