Svelte File Explorer

svelte file explorer

⚠️ Alpha: This project is in alpha and may change unexpectedly.

A shadcn-svelte file explorer. It handles common file operations and allows you to sync your changes to a storage adapter of your choice.

It is fully stylable with shadcn-svelte.

Demo

The demo uses local storage only so no files will be sent anywhere.

Adapters

supabase adapter
local storage adapter
s3 adapter
local file system
?

Usage

<script>
  import CustomAdapter from 'your-adapter-path';
  import AdapterFileBrowser from 'your-component-path';

  const homePath = '/home';
  const adapter = new CustomAdapter(homePath);
</script>

<AdapterFileBrowser
  {adapter}
  pathPrefix={homePath + '/'}
/>

Install

Install shadcn-svelte https://shadcn-svelte.com/docs/installation

initialize jsrepo

jsrepo init https://github.com/simonhackler/svelte-file-explorer

Configure jsrepo.json

 //...
 "paths": {
     "*": "$lib/blocks",
     "utils": "./src/lib/utils",
     "file-browser": "./src/lib/components/file-browser",
     "ui": "./src/lib/components/ui"
 }

Install components
```
jsrepo add
```

Acknowledgements

This repo uses components from

https://github.com/ieedan/shadcn-svelte-extras

https://github.com/huntabyte/shadcn-svelte

License

This project is licensed under the MIT License. See the LICENSE file for details.

Top categories