Dropzone
Utilisation de base
<neura::dropzone />
Variantes
variant :
default (pointillés), solid, card, minimal, cover et avatar.
Chaque variante s'adapte aux différentes tailles (size) et modes d'aperçu (previewMode).
Zone pleine avec fond inséré
<neura::dropzone variant="solid" />
Carte surélevée avec ombre portée
<neura::dropzone variant="card" />
Déclencheur compact sans icône
<neura::dropzone variant="minimal" />
Bannière large pour image de couverture
<neura::dropzone variant="cover" />
<neura::dropzone variant="avatar" accept="image/*" />
Avec label et description
Téléversez une photo de profil. JPG, PNG ou GIF. Max 5MB.
<neura::dropzone
label="Photo de profil"
description="Téléversez une photo de profil. JPG, PNG ou GIF. Max 5MB."
/>
Fichiers multiples
Sélectionnez plusieurs images
files a file
<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
Taille maximale : 5MB
<neura::dropzone
:maxSize="5"
description="Taille maximale : 5MB"
/>
Avec Livewire
PDF, DOC ou DOCX. Max 5MB par fichier.
files a file
<!-- 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
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
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
ChunkedTemporaryFilemanuellement - Méthodes helper pour stocker les fichiers facilement
- Collection
DropzoneFilesavec 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
:invalid="true" :
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 |
| variant | string | 'default' | default, solid, card, minimal, cover, avatar |
| 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) |