Laravel uploading multiple images with error idback: "The idback must be a file of type: jpg, jpeg, png."

  inertiajs, laravel, laravel-8, php, vue.js

I’m using Laravel 8 and Vue.js to making an form where I uploading two images (every each one into different paths and by different input fields).

I was surfing on internet and find out nothing what will be described my situation.

The Error I got in the Google Chrome Dev Tools -> Network -> Preview:

idback: "The idback must be a file of type: jpg, jpeg, png."
idfront: "The idfront must be a file of type: jpg, jpeg, png."

But the file which I post into form was .jpg

My VerificationController.php store function:

public function store(Request $request) 
{
    $request->validate([
      'firstname' => 'required|min:2|max:255',
      'lastname' => 'required|min:2|max:255',
      'idfront' => 'required|mimes:jpg,jpeg,png|max:2048',
      'idback' => 'required||mimes:jpg,jpeg,png|max:2048',
    ]);
    
    
    
    
    if($request->hasFile('idfront') && $request->hasFile('idback')) {
       $file_front = time().'.'.$request->file('idfront')->extension();
       $file_back = time().'.'.$request->file('idback')->extension();
       
       $request->file('idfront')->storeAs('user_verifications/front', $file_front);
       $request->file('idback')->storeAs('user_verifications/back', $file_back);
       
       $user = auth()->user();
       $user = DB::table('users')->where('id', $user->id)->first();
       $user->verified = "yes";
       $user->save();
       
          
       $verification = new Verification();
       $verification->user_id = $user->id;
       $verification->firstname = $request->input('firstname');
       $verification->lastname = $request->input('lastname');
       $verification->country = $request->input('country');
       $verification->id_front_path = $file_front;
       $verification->id_back_path = $file_back;
       $verification->save();
          
       DB:commit();

    }



}

The Verify.vue file, with axios request:

data() {
        return {
            verificationForm: this.$inertia.form({
                firstname: '',
                lastname: '',
                country: 'USA',
                options: [
                  { text: 'United States', value: 'USA' },
                  { text: 'United Kingdom', value: 'UK' },
                  { text: 'Afghanistan', value: 'Afghanistan' },
                  {...},
                ],
                idfront: '',
                idback: '',
            }, {
                bag: 'createVerification',
                resetOnSuccess: false,
            }),
        }
    },
    methods: {
        createVerification() {
            this.verificationForm.post('/user/verify', {
                preserveScroll: true,
            });
        }
    }
}

And the tag:

<form @submit.prevent="$emit('submitted')" enctype="multipart/form-data">

Source: Laravel

Leave a Reply