Error when trying to fill in form in Laravel 8

I am trying to create a form in Laravel, which has different fields that should be filled in. This is my code for the rules. They are stored in custom Request class:

class CategoryFormRequest 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()
    {
        $rules = [
            'name' => [
                'required',
                'string',
                'max:200'
            ],
            'slug' => [
                'required',
                'string',
                'max:200'
            ],
            'description' => [
                'required'
               
            ],
            'image' => [
                'required',
                'mimes:jpeg,jpg,png'
            ], 
            'meta_title' => [
                'required',
                'string',
                'max:200'
            ],
            'meta_description' => [
                'required',
                'string'
            ],
            'meta_keyword' => [
                'required',
                'string'
            ],

            'navbar_status' => [
                'nullable',
                'boolean',
            ],
            'status' => [
                'nullable',
                'boolean',
            ]
        ];
        return $rules;
    }
}

The store method is the following:

public function store(CategoryFormRequest $request){

        $data = $request->validated();

        $category = new Category;
        $category->name = $data['name'];
        $category->slug = $data['slug'];
        $category->description = $data['description'];

        if ($request->file('image')) {
            $file = $request->file('image');
            $filename = date('YmdHi').$file->getClientOriginalExtension();
            $file-> move(public_path('public/Image'), $filename);
            $data['image']= $filename;

        }

        $category->meta_title = $data['meta_title'];
        $category->meta_description = $data['meta_description'];
        $category->meta_keyword = $data['meta_keyword'];
        
        $category->navbar_status = $request->navbar_status == true ? '1' : '0';
        $category->status = $request->status == true ? '1' : '0';;
        $category->created_by = Auth::user()->id;
        $category->save();

        return redirect('admin/category')->with('message', 'Category Added Successfully');
    }

This is my view:

<div class="container-fluid px-4">

    <div class="card mt-4">
        <div class="card-header">
            <h4 class="mt-4"> Add Category</h1>
        </div>
        <div class="card-body">

            @if ($errors->any())
            <div class="alert alert-danger">

                @foreach ($errors->all() as $error )
                <div>{{ $error }}</div>
                    
                @endforeach
            </div>
                
            @endif

            <form action="{{ url('admin/add-category') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <div class="mb-3">
                    <label>Category Name</label>
                    <input type="text" name="name" class="form-control">
                </div>

                <div class="mb-3">
                    <label>Slug</label>
                    <input type="text" name="slug" class="form-control">

                </div>

                <div class="mb-3">
                    <label>Description</label>
                    <textarea name="description" rows="5" class="form-control"></textarea>
                </div>

                <div class="mb-3">
                    <label>Image</label>
                    <input type="file" name="name" class="form-control">
                </div>

                <h6>SEO Tags</h6>
                <div class="mb-3">
                    <label>Meta Title</label>
                    <input type="text" name="meta_title" class="form-control">
                </div>

                <div class="mb-3">
                    <label>Meta Description</label>
                    <textarea name="meta_description" rows="3" class="form-control"></textarea>
                </div>

                <div class="mb-3">
                    <label>Meta Keyword</label>
                    <textarea name="meta_keyword" rows="3" class="form-control"></textarea>
                </div>

                <h6>Status Mode</h6>
                <div class="row">
                    <div class="col-md-3 mb-3">
                        <label>Navbar Status</label>
                        <input type="checkbox" name="navbar_status"/>
                    </div>
                    <div class="col-md-3 mb-3">
                        <label>Status</label>
                        <input type="checkbox" name="status"/>
                    </div>
                    <div class="col-md-6">
                       <button type="submit" class="btn btn-primary">Save Category</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

Now, when I try to fill in everything I get always the following error:

The name must be a string. The image field is required.

I tried different approaches with validate, but is always the same. What could be the reason for this error?

Answer

You need to give unique value as name parameter of an input field, and this name parameter must be aligned with the request file.

Since you have this in your request file:

  'image' => [
                'required',
                'mimes:jpeg,jpg,png'
            ], 

You need to change the input type file to have the same name:

   <div class="mb-3">
      <label>Image</label>
      <input type="file" name="image" class="form-control">
   </div>