Как передать объект изображения при редактировании сущности и установить его в форме по умолчанию, Laravel | Inertia | Vue3

Я столкнулся с проблемой и непониманием как передавать объект изображения при редактировании сущности (в примере product) и устанавливать его в форме по умолчанию вместе с превью этого изображения. Использую Laravel 10, Inertia и Vue3 (в познаниях vue3 и js, сразу скажу, я не силен, т.к сам изучаю PHP и Laravel). Для передачи request использую помощник форм по документации Inertia.

Сущность product (в thumbnail храниться url миниатюры):

Schema::create('products', function (Blueprint $table) {
        $table->id();
        $table->string('title');
        $table->string('slug');
        $table->text('description');
        $table->text('content');
        $table->string('thumbnail')->nullable();
        $table->float('price');
        $table->integer('count');
        $table->boolean('is_published')->default(false);
        $table->integer('category_id')->unsigned()->nullable();
        $table->timestamps();
    });

Метод контроллера:

public function edit(string $slug)
{
    $categories = Category::pluck('title', 'id')->all();
    $tags = Tag::pluck('title', 'id')->all();
    $product = Product::where('slug', $slug)->firstOrFail();
    $productTags = $product->tags->pluck('id')->all();

    return Inertia::render('Admin/Products/Edit', [
        'product' => $product,
        'categories' => $categories,
        'tags' => $tags,
        'productTags' => $productTags,
    ]);
}

Export default страницы vue3 с формой редактирования:

export default defineComponent({
name: "Edit",
components: {
    MainAdminLayout,
    Link,
    Head,
},
props: {
    product: Object,
    categories: Array,
    tags: Array,
    productTags: Array,
},
methods: {
    route,
},
setup(props) {
    const previewImage = ref(null);
    const handleFileChange = (event) => {
        const file = event.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = () => {
                previewImage.value = reader.result;
            };
            reader.readAsDataURL(file);
        } else {
            previewImage.value = null;
        }
    };
    const form = useForm({
        title: props.product.title,
        description: props.product.description,
        content: props.product.content,
        price: props.product.price,
        count: props.product.count,
        category_id: props.product.category_id,
        tags: props.productTags,
        thumbnail: null
    });
    function store() {
        form.put(route('products.update', props.product.id))
    }
    return {form,
        store,
        previewImage,
        handleFileChange,};
},
})

Input изображения:

<div class="flex items-center space-x-6 pb-8">
            <label class="block">
                <input type="file" name="thumbnail" id="thumbnail" @input="form.thumbnail = $event.target.files[0]" @change="handleFileChange" class="block w-full text-sm text-slate-500
                    file:mr-4 file:py-2 file:px-4
                    file:rounded-full file:border-0
                    file:text-sm file:font-semibold
                    file:bg-violet-50 file:text-blue-700
                    hover:file:bg-violet-100
                  "/>
            </label>
            <div v-if="previewImage" class="shrink-0">
                <img :src="previewImage" class="h-36 w-36 object-cover " alt="">
            </div>
            <span v-if="form.errors.title" class="text-sm text-red-600"> {{ form.errors.thumbnail }} </span>
        </div>

С передачей и установкой по умолчанию текстовых, числовых и т.п данных у меня проблем нет, но с изображением я не знаю что делать. Как, в случае, когда пользователь не изменял изображение передавать его обратно в виде объекта UploadedFile и корректно отображать превью. Возможно у меня трудности в самом понимании решения такой задачи, может быть нужно просто проверять изображение на изменение или же методами нативного js или vue3 получать объект изображения по url. Подскажите как решить такую задачу или альтернативные пути решения, по типу той же проверки, заранее Всем большое спасибо за уделенное мне время.


Ответы (0 шт):