Now, let's add a file upload field to the Tasks CRUD.
Prepare Back-End: Spatie Media Library
Let's install a well-known package spatie/laravel-medialibrary to handle the file data.
composer require "spatie/laravel-medialibrary"
Then, according to its documentation, we need to publish and run migrations:
php artisan vendor:publish --provider="Spatie\MediaLibrary\MediaLibraryServiceProvider" --tag="medialibrary-migrations"php artisan migrate
Finally, we add the appropriate Traits to the Task Model file.
app/Models/Task.php:
use Spatie\MediaLibrary\HasMedia; use Spatie\MediaLibrary\InteractsWithMedia; // ... class Task extends Modelclass Task extends Model implements HasMedia//[ tl! ++]{ use HasFactory; use InteractsWithMedia; // ...
Ok, the package installation/configuration is ready. Let's dive into the forms.
File Upload in Create Form: Front-End
This time, let's start with the front end.
For reference, here's the Inertia documentation on File Uploads.
Let's see how our Create.tsx
file needs to change.
- We add
media
to theCreateTaskForm
anduseForm
- We add a
progress
indicator from Inertia - We add the
<Input>
for the file picker
We start with the TypeScript changes...