File Manager

Explorateur de fichiers complet : navigation par dossiers, sélection multiple, vues liste et grille, panneau de détails et raccourcis clavier.

Utilisation de base

Passez une arborescence à :items . Chaque nœud accepte id , name , size , modified , mime , thumbnail et children pour les dossiers.

javascript

selected

Filtered

Drop to upload

<neura::file-manager :items="$tree" height="26rem" />


$tree = [
    [
        'id' => 'projects',
        'name' => 'Projects',
        'type' => 'folder',
        'modified' => '2026-07-21 09:12',
        'children' => [
            ['id' => 'brief', 'name' => 'brief.pdf', 'size' => 482310],
        ],
    ],
    ['id' => 'readme', 'name' => 'README.md', 'size' => 4096],
];

Vue grille

La vue par défaut se règle avec view . L'utilisateur peut basculer à tout moment depuis la barre d'outils.

blade

selected

Filtered

Drop to upload

<neura::file-manager :items="$tree" view="grid" />

Compact et lecture seule

Désactivez les actions inutiles pour intégrer l'explorateur dans un panneau latéral ou une modale.

blade

Filtered

Drop to upload

<neura::file-manager
    :items="$tree"
    size="sm"
    :selectable="false"
    :details="false"
    :uploadable="false"
    :creatable="false"
    :deletable="false"
/>

Événements

Toutes les interactions émettent un événement DOM préfixé par file-manager: , que vous pouvez écouter en Alpine ou en Livewire.

blade

selected

Filtered

Drop to upload

Événements

Sélectionnez, ouvrez ou supprimez un élément pour voir les événements.

<div
    x-data="{ log: [] }"
    x-on:file-manager:open="log.unshift($event.detail.items[0].name)"
    x-on:file-manager:navigate="console.log($event.detail.path)"
    x-on:file-manager:select="console.log($event.detail.items)"
>
    <neura::file-manager :items="$tree" />
</div>


<neura::file-manager
    :items="$tree"
    x-on:file-manager:delete="$wire.deleteFiles($event.detail.items)"
    x-on:file-manager:navigate="$wire.loadFolder($event.detail.path)"
/>

Événements disponibles

file-manager:open — double-clic ou Entrée sur un fichier
file-manager:navigate — changement de dossier (path, folder)
file-manager:select — sélection modifiée (items)
file-manager:download / file-manager:delete — actions sur la sélection
file-manager:new-folder / file-manager:upload-request — boutons de la barre d'outils
file-manager:upload — fichiers déposés sur l'explorateur (files, path)
file-manager:sort / file-manager:view — préférences d'affichage
file-manager:reorder — réordonnancement par glisser-déposer (order, items, position)
file-manager:move — dépôt dans un dossier (items, target, position: inside)

Tri et ordre personnalisé

Les en-têtes de colonnes et le menu de tri couvrent name / size / modified / kind. Avec sortable (activé par défaut), glissez des éléments pour les réordonner ou les déposer au centre d'un dossier pour les y déplacer — le tri bascule alors en manual .

blade

selected

Filtered

Drop to upload

<neura::file-manager
    :items="$tree"
    sort="manual"
    x-on:file-manager:reorder="$wire.persistOrder($event.detail)"
    x-on:file-manager:move="$wire.moveItems($event.detail)"
/>

<!-- Désactiver le glisser-déposer -->
<neura::file-manager :items="$tree" :sortable="false" />

Menu contextuel et dépôt

Un clic droit sur un élément propose ouvrir, télécharger, renommer et supprimer ; sur une zone vide, il propose de créer un dossier, téléverser ou tout sélectionner. Glisser des fichiers sur l'explorateur affiche une zone de dépôt et émet file-manager:upload .

blade

selected

Filtered

Drop to upload

<!-- Le menu contextuel suit les capacités déclarées -->
<neura::file-manager
    :items="$tree"
    :renamable="true"
    :deletable="true"
    x-on:file-manager:rename="$wire.rename($event.detail.items[0])"
    x-on:file-manager:upload="$wire.upload($event.detail.files)"
/>

Recherche personnalisée

La recherche est un point d'extension. Trois leviers, combinables : searchScope (dossier courant ou arborescence entière), searchMatcher (votre propre fonction de correspondance) et searchMode (filtrage local ou délégué au serveur).

Votre propre fonction

Déclarez une fonction (entry, query, manager) => boolean et passez son nom — ou un chemin pointé comme App.search.files pour éviter de polluer window . La démo ci-dessous comprend type:pdf , >10mb et la recherche par extension.

javascript

selected

Filtered

Drop to upload

window.searchFiles = (entry, query, manager) => {
    if (query.startsWith('type:')) return entry.kind === query.slice(5);
    if (query.startsWith('.')) return entry.extension.toLowerCase() === query.slice(1);

    return (entry.name + ' ' + (entry.tags ?? []).join(' '))
        .toLowerCase()
        .includes(query);
};


<neura::file-manager
    :items="$tree"
    search-matcher="searchFiles"
    search-scope="all"
    search-placeholder="type:pdf, .png…"
/>

Ce que reçoit votre fonction

entry — l'élément décoré : name, kind, extension, size, modifiedAt, isFolder, pathNames, plus vos propres champs
query — la saisie, déjà rognée et en minuscules
manager — le composant, pour lire path, searchScope, etc.

Recherche côté serveur

Avec search-mode="remote" , plus aucun filtrage local : le composant émet file-manager:search après une temporisation (search-delay , 300 ms par défaut) et affiche un indicateur pendant l'attente. À vous de renvoyer les résultats dans items .

PHP

<neura::file-manager
    :items="$results"
    :loading="$searching"
    search-mode="remote"
    :search-delay="400"
    x-on:file-manager:search="$wire.searchFiles($event.detail.query, $event.detail.path)"
/>


public array $results = [];
public bool $searching = false;

public function searchFiles(string $query, array $path): void
{
    $this->searching = true;

    $this->results = Media::query()
        ->when($query, fn ($q) => $q->whereFullText('name', $query))
        ->get()
        ->map(fn ($m) => ['id' => $m->id, 'name' => $m->name, 'size' => $m->size])
        ->all();

    $this->searching = false;
}

État de chargement

Avec :loading="true" , l'explorateur affiche un squelette calibré sur la hauteur des lignes : aucun saut de mise en page quand les données arrivent.

blade

selected

Filtered

Drop to upload

<neura::file-manager :items="$tree" :loading="$loading" />

Raccourcis clavier

Déplacer la sélection ↑ / ↓

Naviguer en vue grille ← / →

Ouvrir le dossier ou le fichier Entrée

Cocher / décocher Espace

Remonter d'un niveau Retour arrière

Tout sélectionner Ctrl / ⌘ + A

Sélectionner une plage Maj + clic

Ajouter à la sélection Ctrl / ⌘ + clic

Émettre l'action de suppression Suppr

Effacer la sélection Échap

Propriétés

Property	Type	Default	Description
items	array	`[]`	Arborescence affichée. Les dossiers portent `children`.
view	string	`'list'`	Vue initiale : `list` ou `grid`.
size	string	`'md'`	Densité : `sm`, `md`, `lg`.
sort	string	`'name'`	Tri initial : `name`, `size`, `modified`, `kind`, `manual`.
direction	string	`'asc'`	Sens du tri initial.
sortable	bool	`true`	Active le glisser-déposer pour réordonner et déplacer vers un dossier.
selectable	bool	`true`	Active la sélection des éléments.
multiple	bool	`true`	Autorise la sélection multiple (Maj / Ctrl / tout cocher).
searchable	bool	`true`	Affiche le champ de recherche.
searchScope	string	`'folder'`	`folder` (dossier courant) ou `all` (arborescence entière, chaque résultat affiche son chemin).
searchMatcher	string\|null	`null`	Nom global ou chemin pointé d'une fonction `(entry, query, manager) => bool`.
searchMode	string	`'local'`	`local` filtre dans le navigateur, `remote` émet `file-manager:search`.
searchDelay	int	`300`	Temporisation avant l'émission d'une recherche distante (ms).
searchPlaceholder / scopeToggle	string\|null / bool	`null` / `true`	Texte indicatif du champ et affichage du sélecteur de portée.
details	bool	`true`	Active le panneau latéral de détails.
uploadable / creatable	bool	`true`	Affiche les boutons « Téléverser » et « Nouveau dossier ».
downloadable / deletable	bool	`true`	Affiche les actions correspondantes sur les lignes, la sélection et le menu contextuel.
renamable	bool	`true`	Affiche « Renommer » dans le menu contextuel (émet `file-manager:rename`).
loading	bool	`false`	Affiche le squelette de chargement à la place de la liste.
rootLabel	string	`'Home'`	Libellé de la racine dans le fil d'Ariane.
height	string	`null`	Hauteur fixe du composant (ex. `28rem`).
rounded / shadow	string	`global`	Surcharges du design system.

Neura UI

File Manager

Utilisation de base

Vue grille

Compact et lecture seule

Événements

Tri et ordre personnalisé

Menu contextuel et dépôt

Recherche personnalisée

Votre propre fonction

Recherche côté serveur

État de chargement

Raccourcis clavier

Propriétés