Courses

React Laravel 12 Starter Kit: CRUD Project

File Upload with Spatie Media Library

Summary of this lesson:
- Add file uploads to tasks using Spatie Media Library
- Configure backend file handling with proper database relationships
- Implement file upload fields in create/edit forms with progress indicators
- Display uploaded files as thumbnails in task listing table

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 Model
class 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 the CreateTaskForm and useForm
  • We add a progress indicator from Inertia
  • We add the <Input> for the file picker

We start with the TypeScript changes...

The full lesson is only for Premium Members.
Want to access all 14 lessons of this course? (77 min read)

You also get:

  • 75 courses
  • Premium tutorials
  • Access to repositories
  • Private Discord