How to load images on post creation in laravel inertia vue?

Question

Laravel

I created a simple thief for working with posts, and I need to load the main image of the post, I use laravel inertia vue and it’s not very clear from the file upload inertia documentation, although something is not at all clear there.

Right now I have the following files

Controller

<?php

namespace App\Http\Controllers\Admin;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Models\Article;
use Inertia\Inertia;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Log;

class ArticleController extends Controller
{
    public function index(Request $request)
   {
       $data = Article::when($request->term, function($query, $term){
         $query->where('title', 'LIKE', '%'.$term.'%');
       })->orderBy('id', 'desc')->paginate(5);

       return Inertia::render('Admin/Article', ['data' => $data]);
   }
   public function store(Request $request)
   {
       Article::create($request->all());
       Log::channel('admin')->info('Администратор '. Auth::user()->name. ' добавил статью: '. $request->title);
       return redirect()->back();
   }
   public function update(Request $request)
   {
       if ($request->has('id')) {
           Article::find($request->input('id'))->update($request->all());
           return redirect()->back();
       }
   }
   public function destroy(Request $request)
   {
       if ($request->has('id')) {

           Article::find($request->input('id'))->delete();
           Log::channel('admin')->info('Администратор '. Auth::user()->name. ' удалил статью: '. $request->title);
           return redirect()->back();
       }
   }
}

Component

<script>
import { defineComponent } from "vue"
import AdminLayout from "@/Layouts/AdminLayout.vue"
import { Head, Link } from '@inertiajs/inertia-vue3'
import Pagination from "@/Pages/Pagination.vue"


export default {
  props: {
    data: Object,
  },
  data() {
    return {
      isActive: false,
      addActive: false,
      editMode: false,
      isAlert: false,
      textAlert: {
        text: null,
      },
      term: '',
      form: {
        title: null,
        description: null,
        text: null,
        image_path: null,

      },
    }
  },
  components: {
    AdminLayout, Head, Link, Pagination,
  },
  methods: {
    openModal: function () {
      this.isActive = true;
    },
    Alert: function (param) {
      this.textAlert = {
        text: param,
      }
      this.isAlert = true;
      setTimeout(() => this.isAlert = false, 3000);
    },
    closeModal: function () {
      this.isActive = false;
      this.reset();
      this.editMode=false;
    },
    reset: function () {
      this.form = {
        title: null,
        description: null,
        text: null,
        image_path: null,
      }
    },
    save: function (data) {
      this.$inertia.post('/admin/article', data)
      this.reset();
      this.closeModal();
      this.editMode = false;
      this.Alert('Статья успешно добавлена!');

    },
    edit: function (data) {
      this.form = Object.assign({}, data);
      this.editMode = true;
      this.openModal();
    },
    update: function (data) {
      if (!confirm('Sure')) return;
      data._method = 'PUT';
      this.$inertia.post('/admin/article/' + data.id, data)
      this.reset();
      this.closeModal();
      this.Alert('Статья успешно изменена!');
    },
    deleteRow: function (data) {
      if (!confirm('Sure')) return;
      data._method = 'DELETE';
      this.$inertia.post('/admin/article/' + data.id, data)
      this.reset();
      this.closeModal();
    },
    search() {
      this.$inertia.replace(this.route('article.index', {term: this.term}))
    }
  }
}
</script>

I want you to understand right away that I have attached the code not to make a ready-made solution for me, it’s just that sometimes there is a moment that you need to see how everything is arranged now.

So I send all the data that I received from the form, and for now I only add a link to the image that I take from Google, but I want to upload the picture and so that after the picture gets into the storage, a link to it is written to the database. If anyone has any information on this I would be very grateful!

From the site of inertia

<template>
  <form @submit.prevent="submit">
    <input type="text" v-model="form.name" />
    <input type="file" @input="form.avatar = $event.target.files[0]" />
    <progress v-if="form.progress" :value="form.progress.percentage" max="100">
      {{ form.progress.percentage }}%
    </progress>
    <button type="submit">Submit</button>
  </form>
</template>

<script>
import { useForm } from '@inertiajs/inertia-vue3'

export default {
  setup () {
    const form = useForm({
      name: null,
      avatar: null,
    })

    function submit() {
      form.post('/users')
    }

    return { form, submit }
  },
}
</script>