update return array [“isTrusted” => true] Laravel with Vue3 and Inertiajs

I tried to make Update i made a debug in Laravel 8 like that:

Edit and Update function in Controller

public function edit($categories)
    {
        $categories = new CategoriesResources(Categories::findOrFail($categories));
        $categories->image;
        return Inertia::render('Categories/Edit', [
            'categories' => $categories,
        ]);    
    }

public function update(Request $request, $categories)
    {
        $categories = Categories::find($categories);
        dd($request->img_url);
        die;
    }

Vue Template

<template>
   <form @submit.prevent="editCat">
      <input id="cat_name" type="text" v-model="category.cat_name" />
      <input @change="newImage" name="img_url" id="img_url" accept="image/*" type="file" />
      <input type="submit" value="update" /> 
   </form> 
</template>

props: {
    errors: Object,
    categories: Object
},

data(){
    return{
       category:{
          cat_id: this.categories.data.cat_id,
          cat_name: this.categories.data.cat_name,
          created_at: this.categories.data.created_at,
          updated_at: this.categories.data.updated_at,
          _method: 'put'
       },
       img_url: null
    }
},

methods:{
   newImage(e){
       this.img_url = e.target.files[0]
   },
   editCat(){
       this.$inertia.put(`/categories/${this.categories.data.cat_id}`,{
           'img_url' : this.img_url,
       });
   }
}

it return the data in the form but the problem with the image file its return that in debug after changing image file and submit:

array [“isTrusted” => true]

I added in the form like that:

<form @submit.prevent="editCat" enctype="multipart/form-data" method="POST">

nothing changed

I tried to return the image from the props and nothing changed

Answer

I’ve solve the problem

<input @change="newImage( $event.target.files[0] )" />

Advertisement

Answer