Прогресс загрузки в Inertia

Пусть к записи прикладывают файл, и человеку нужно видеть, сколько данных уже ушло на сервер. Без индикатора кажется, что экран завис.

Когда форма отправляет файлы, у хелпера появляется свойство progress с ходом загрузки. В документации для Vue его выводят через элемент progress и поле percentage. Пока отправка идёт, число растёт от нуля до ста.

Давайте опишем приём формы с вложением:

<?php
	use Illuminate\Http\Request;
	use Illuminate\Support\Facades\Route;
	use Inertia\Inertia;

	Route::get('/posts/create', function () {
		return Inertia::render('Posts/Create');
	});

	Route::post('/posts', function (Request $request) {
		return back();
	});
?>

Давайте добавим файл и полоску прогресса:

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

	const form = useForm({
		title: '',
		attachment: null,
	})

	function pickFile(event) {
		form.attachment = event.target.files[0]
	}

	function submit() {
		form.post('/posts')
	}
</script>

<template>
	<form @submit.prevent="submit">
		<input
			type="text"
			v-model="form.title"
		/>
		<input
			type="file"
			@change="pickFile"
		/>
		<progress
			v-if="form.progress"
			:value="form.progress.percentage"
			max="100"
		>
			{{ form.progress.percentage }}%
		</progress>
		<button type="submit">Save</button>
	</form>
</template>

Сделайте форму работника Uma с полем резюме-файла и процентом загрузки на время отправки.