Basic usage

Navigate folders, select items (click, Ctrl/Shift+click), double-click to open/preview, right-click for a context menu, drag files from your desktop to upload, and drag items onto a folder to move them.

<neiki-file-manager id="fm"></neiki-file-manager>

fm.setData([
  { id: 'documents', name: 'Documents', type: 'folder', parent: null },
  { id: 'readme', name: 'readme.md', type: 'file', size: 2048, parent: null }
]);

Grid & list views

Toggle programmatically with setView(), or use the built-in toolbar buttons.

Themes

Each instance resolves its own theme independently — light, dark, or auto (follows the OS).

Internationalization (i18n)

Built-in translations for English, Czech, German, Spanish, French, Polish, Slovak and Ukrainian — switch with setLang() or the lang attribute. Add your own with addTranslations().

fm.setLang('cs');

fm.addTranslations('en', {
  toolbar: { upload: 'Send files' }
});

Drag & drop upload + preview

Drop image, audio or video files onto the manager below — they're added instantly with a live preview (via URL.createObjectURL), no server required. Double-click any file to open the preview.

JavaScript API & events

Every mutation goes through a cancelable event first (upload, rename, delete, move) so you can hook up a real backend and call event.preventDefault() to take over.

Event log

CDN-style usage

<script src="https://cdn.neikiri.dev/neiki-file-manager/neiki-file-manager.min.js"></script>

<neiki-file-manager id="fm"></neiki-file-manager>
<script>
  document.getElementById('fm').setData([
    { id: 'photos', name: 'Photos', type: 'folder', parent: null }
  ]);
</script>