Dropzone

Composant d'upload de fichiers avec drag & drop, prévisualisation et validation automatique

Utilisation de base

Drag & drop a file here, or browse Drop files here

Images only · Max 10MB

<neura::dropzone />

Avec label et description

Photo de profil

Téléversez une photo de profil. JPG, PNG ou GIF. Max 5MB.

Drag & drop a file here, or browse Drop files here

Images only · Max 10MB

<neura::dropzone 
    label="Photo de profil"
    description="Téléversez une photo de profil. JPG, PNG ou GIF. Max 5MB."
/>

Fichiers multiples

Téléverser des images

Sélectionnez plusieurs images

Drag & drop files here, or browse Drop files here

Images only · Max 10MB

<neura::dropzone 
    :multiple="true"
    label="Téléverser des images"
/>

Types de fichiers acceptés

<!-- Images uniquement (par défaut) -->
<neura::dropzone accept="image/*" />

<!-- PDF uniquement -->
<neura::dropzone accept=".pdf" />

<!-- Plusieurs types -->
<neura::dropzone accept=".pdf,.doc,.docx,.txt" />

Taille maximale

Téléverser un fichier

Taille maximale : 5MB

Drag & drop a file here, or browse Drop files here

Images only · Max 5MB

<neura::dropzone 
    :maxSize="5"
    description="Taille maximale : 5MB"
/>

Avec Livewire

Le dropzone détecte automatiquement les erreurs de validation Livewire et affiche l'état d'erreur en temps réel.

Téléverser des documents

PDF, DOC ou DOCX. Max 5MB par fichier.

Drag & drop files here, or browse Drop files here

All files · Max 5MB

<!-- Blade View -->
<neura::field required>
    <neura::label>Documents</neura::label>
    <neura::dropzone 
        wire:model="documents"
        :multiple="true"
        accept=".pdf,.doc,.docx"
        :maxSize="5"
    />
    <neura::error name="documents" />
</neura::field>

<!-- Livewire Component -->
use Livewire\WithFileUploads;
use Livewire\Attributes\Validate;
use Neura\Kit\Concerns\WithDropzone;

class DocumentUploader extends Component
{
    use WithFileUploads, WithDropzone;
    
    #[Validate([
        'documents' => 'required|array|min:1',
        'documents.*' => 'file|mimes:pdf,doc,docx|max:5120'
    ])]
    public $documents = [];
    
    public function submitDocuments()
    {
        $this->validate();
        
        // Méthode 1: Stocker directement tous les fichiers
        $paths = $this->storeDropzoneFiles('documents', 'documents');
        
        // Méthode 2: Obtenir les fichiers et les traiter manuellement
        $files = $this->getDropzoneFiles('documents');
        foreach ($files as $file) {
            $path = $file->store('documents');
            Document::create([
                'path' => $path,
                'name' => $file->getClientOriginalName(),
                'size' => $file->getSize(),
            ]);
        }
        
        $this->clearDropzone('documents');
    }
}

Le dropzone détecte automatiquement les erreurs de validation et affiche :

Bordure rouge
Fond rouge
Icône rouge
Messages d'erreur via neura::error

Fonctionne avec les erreurs de tableau (documents, documents.*, documents.0)

Exemple interactif de validation

Documents (PDF, DOC, DOCX - Max 5MB)

Sélectionnez au moins un document. Formats acceptés : PDF, DOC, DOCX. Taille max : 5MB par fichier.

Drag & drop files here, or browse Drop files here

All files · Max 5MB

Pour tester la validation automatique :

Cliquez sur "Valider les documents" sans sélectionner de fichiers
Le dropzone affichera automatiquement un état d'erreur (bordure rouge, fond rouge, icône rouge)
Les messages d'erreur s'afficheront sous le dropzone

Trait WithDropzone

Le trait WithDropzone simplifie la gestion des fichiers uploadés via le dropzone. Il convertit automatiquement les données du dropzone en TemporaryUploadedFile utilisables directement.

Utilisation de base

use Neura\Kit\Concerns\WithDropzone;
use Livewire\WithFileUploads;

class DocumentUploader extends Component
{
    use WithFileUploads, WithDropzone;
    
    public $documents = [];
    
    public function save()
    {
        $this->validate(['documents' => 'required|array|min:1']);
        
        // Stocker tous les fichiers en une ligne
        $paths = $this->storeDropzoneFiles('documents', 'uploads/documents');
        
        // Vider le dropzone après traitement
        $this->clearDropzone('documents');
    }
}

Méthodes disponibles

Méthode	Description	Retour
getDropzoneFiles($property)	Obtenir tous les fichiers en tant que collection	DropzoneFiles
getDropzoneFile($property)	Obtenir un seul fichier (pour uploads non-multiples)	TemporaryUploadedFile\|null
storeDropzoneFiles($property, $path, $disk)	Stocker tous les fichiers et retourner les chemins	array
storeDropzoneFile($property, $path, $disk)	Stocker un seul fichier et retourner le chemin	string\|null
clearDropzone($property)	Vider le dropzone après traitement	void

Exemples d'utilisation

// Exemple 1: Stocker directement tous les fichiers
public function save()
{
    $this->validate(['documents' => 'required|array|min:1']);
    
    $paths = $this->storeDropzoneFiles('documents', 'uploads/documents');
    // $paths = ['uploads/documents/file1.pdf', 'uploads/documents/file2.pdf']
    
    $this->clearDropzone('documents');
}

// Exemple 2: Traiter chaque fichier individuellement
public function save()
{
    $this->validate(['documents' => 'required|array|min:1']);
    
    $files = $this->getDropzoneFiles('documents');
    foreach ($files as $file) {
        $path = $file->store('documents');
        Document::create([
            'path' => $path,
            'name' => $file->getClientOriginalName(),
            'size' => $file->getSize(),
            'mime' => $file->getMimeType(),
        ]);
    }
    
    $this->clearDropzone('documents');
}

// Exemple 3: Utiliser DropzoneFiles directement
public function save()
{
    $files = $this->getDropzoneFiles('documents');
    
    // Stocker avec noms originaux
    $paths = $files->storeAllAs('documents');
    
    // Ou utiliser les méthodes de Collection
    $totalSize = $files->sum(fn($file) => $file->getSize());
    $imageFiles = $files->filter(fn($file) => str_starts_with($file->getMimeType(), 'image/'));
}

// Exemple 4: Upload d'un seul fichier (avatar)
class AvatarUploader extends Component
{
    use WithFileUploads, WithDropzone;
    
    public $avatar = null;
    
    public function save()
    {
        $this->validate(['avatar' => 'required|image|max:2048']);
        
        // Stocker le fichier
        $path = $this->storeDropzoneFile('avatar', 'avatars');
        
        // Ou obtenir le fichier pour traitement
        $file = $this->getDropzoneFile('avatar');
        if ($file) {
            $path = $file->storeAs('avatars', auth()->id() . '.jpg');
        }
        
        $this->clearDropzone('avatar');
    }
}

Conversion automatique des données dropzone en TemporaryUploadedFile
Plus besoin d'utiliser ChunkedTemporaryFile manuellement
Méthodes helper pour stocker les fichiers facilement
Collection DropzoneFiles avec méthodes Laravel Collection
Gestion automatique des fichiers multiples et uniques

Le trait WithDropzone fonctionne avec les données envoyées par le dropzone (format array avec uuid, filename, etc.). Si vous utilisez directement wire:model avec des fichiers normaux, vous n'avez pas besoin de ce trait.

État d'erreur manuel

Vous pouvez forcer l'affichage de l'état d'erreur avec :invalid="true" :

Téléverser des documents

Exemple d'état d'erreur manuel

Drag & drop files here, or browse Drop files here

All files · Max 10MB

<neura::dropzone 
    :invalid="true"
    label="Téléverser des documents"
/>

Options avancées

<!-- Sans prévisualisation -->
<neura::dropzone :preview="false" />

<!-- Sans bouton de suppression -->
<neura::dropzone :removable="false" />

<!-- Taille de chunk personnalisée (pour fichiers volumineux) -->
<neura::dropzone :chunkSize="2" :maxSize="100" />

Propriétés

Propriété	Type	Défaut	Description
accept	string	'image/*'	Types de fichiers acceptés
maxSize	int	10	Taille maximale en MB
multiple	bool	false	Autoriser plusieurs fichiers
preview	bool	true	Afficher la prévisualisation
removable	bool	true	Afficher le bouton de suppression
label	string\|null	null	Label affiché au-dessus
description	string\|null	null	Description affichée sous le label
invalid	bool\|null	null	État d'erreur (détecté automatiquement avec wire:model)
wire:model	string	-	Binding Livewire (détection automatique des erreurs)