Vue / Laravel: How to validate files uploaded from the frontend?

Question

I have an image uploader on my Vue app that takes multiple files. I want to ensure they are images and of a certain size and if not, obviously don't upload the files and have the frontend display the error. Right now, the route it hits in the controller loos like this:

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

My Form Request is below and has the validation but I don't know how to apply that in the controller.

UploadAssetsFormRequest

<?php

namespace App\Http\Requests\Admin;

use Illuminate\Foundation\Http\FormRequest;

class UploadAssetsFormRequest extends FormRequest
{

    public function authorize()
    {
        return true;
    }

    public function rules()
    {
        return [
            'files.*' => 'required|image|max:1000',
        ];
    }

    public function messages()
    {
        return [
            'files.*.max'   => 'The image is too large',
            'files.*.image' => 'Only image files are allowed.',
        ];
    }
}

Siba Al · Accepted Answer · 2020-05-03 09:18:52Z

0

You need to check files extension :

$extension = $file->extension();
$allowed_file_types = ['jpg','png','gif'];
if (in_array($extension, $allowed_file_types)){
//do upload
}else{
Continue;
}

for file sizes check this thread

answered May 3, 2020 at 9:18

Siba Al

3571 silver badge14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Manvir Singh · Accepted Answer · 2020-05-03 09:49:00Z

0

You can use laravel image validation

$this->validate ($input, [
    'files.*.image' => 'image|max:200',
]):

Note: max(size) is in Kilobytes

You can also use dimension rule

$this->validate ($input, [
    'files.*.image' => 'dimensions:min_width=100,min_height=200'
]):

Laravel Image Validation

Laravel Image Dimensions Validation

edited May 3, 2020 at 9:49

answered May 3, 2020 at 9:43

Manvir Singh

4314 silver badges6 bronze badges

Comments

sn n · Accepted Answer · 2020-05-03 10:12:33Z

0

You can set the following rule in your validation -

 'file' => 'required|max:100|mimes:jpg,png,bmp' // 100kb, mimes must have image extensions

answered May 3, 2020 at 10:12

sn n

3991 gold badge7 silver badges20 bronze badges

Collectives™ on Stack Overflow

Vue / Laravel: How to validate files uploaded from the frontend?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related