FilePond à Laravel : Guide de téléchargement de fichiers

Pour les téléchargements de fichiers, il existe une bibliothèque JavaScript très populaire appelée FilePond. Comment l’utiliser dans Laravel ? Nous parlerons de son utilisation dans les formulaires de création/modification, de la prévisualisation des images, puis nous essaierons d’utiliser des outils tels que Spatie Media Library, Amazon S3 et Livewire. Alors, allons-y !

Étape par étape, nous aborderons ces sujets :

Formulaire de téléchargement de fichier sans FilePond

Changement visuel : remplacer l’entrée de fichier par FilePond

Traiter le téléchargement avec FilePond

FilePond sous forme d’édition

Téléchargement de plusieurs fichiers

Utilisation de la médiathèque Spatie

Téléchargement sur Amazon S3

Télécharger directement sur S3 avec Livewire

Étape 1. Formulaire de téléchargement de fichier sans FilePond

Tout d’abord, installons le décor : nous allons travailler avec un simple Tâche formulaire avec des champs titre et image:

Structure migratoire :

base de données/migrations/xxxx_create_tasks_table.php:

return new class extends Migration {
    public function up()
    {
        Schema::create('tasks', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->string('image');
            $table->timestamps();
        });
    }
};

La méthode du contrôleur pour ce formulaire sera aussi simple que ceci :

app/Http/Controllers/TasksController.php:

class TasksController extends Controller
{
    public function create()
    {
        return view('tasks.create');
    }

    public function store(TaskRequest $request)
    {
        Task::create($request->validated());

        return redirect()->route('tasks.index');
    }
}

Pour la partie frontale, nous utiliserons Laravel Breeze comme kit de démarrage…