06 - Gestion des Uploads avec Inertia v2

Dans le projet Devinsto, j’ai intégré le traitement d’image de manière totalement transparente pour le frontend. Voici comment l’upload est géré côté Vue.js.

1. Utilisation du composant <Form> d’Inertia

Pour la création et l’édition d’articles (PostCreate.vue et PostEdit.vue), nous utilisons le nouveau composant <Form> d’Inertia v2.

Exemple d’implémentation :

<Form
    :action="post ? route('blog.posts.update', post.id) : route('blog.posts.store')"
    :method="post ? 'put' : 'post'"
    #default="{ processing, progress }"
>
    <!-- Champ Upload Image -->
    <input 
        type="file" 
        @input="form.cover_image = $event.target.files[0]" 
    />
    
    <!-- Barre de progression native -->
    <progress v-if="progress" :value="progress.percentage" max="100">
        {{ progress.percentage }}%
    </progress>
</Form>

2. Pourquoi le traitement est-il “transparent” ?

J’ai choisi d’implémenter le traitement côté serveur (PHP) juste après le stockage. Cela signifie que :

1. L’utilisateur envoie l’image brute (plus rapide pour le navigateur, pas de calcul lourd en JS).
2. Inertia gère l’upload avec une barre de progression fluide.
3. Le serveur traite l’image en tâche de fond (ou durant la requête synchrone).
4. Le résultat est immédiatement disponible lors de la redirection vers la page d’index ou de visualisation.

3. Optimisation du cycle de vie

Comme j’ai utilisé l’architecture STALL, l’action StorePostAction s’occupe de tout. Côté Vue, vous n’avez pas besoin de savoir que l’image est redimensionnée ou marquée d’un filigrane. Vous envoyez un File et vous recevez un Post avec un chemin d’image valide.