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.

• Site: https://file-browser-demo.vercel.app/
• Repo: https://github.com/simonhackler/file-browser-demo

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

1. Install shadcn-svelte https://shadcn-svelte.com/docs/installation
2. initialize jsrepo

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

3. Configure jsrepo.json

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

4. 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.