https://github.com/svar-widgets/filemanager

Easy-to-use Svelte file manager (file explorer) component
https://github.com/svar-widgets/filemanager

file-browser file-browser-integration file-explorer file-manager javascript javascript-library svelte svelte-component sveltejs ui-components

Last synced: 2 days ago
JSON representation

Easy-to-use Svelte file manager (file explorer) component

• Host: GitHub
• URL: https://github.com/svar-widgets/filemanager
• Owner: svar-widgets
• License: mit
• Created: 2024-10-08T13:37:11.000Z (about 1 month ago)
• Default Branch: main
• Last Pushed: 2024-10-14T18:20:21.000Z (about 1 month ago)
• Last Synced: 2024-11-11T22:44:06.372Z (3 days ago)
• Topics: file-browser, file-browser-integration, file-explorer, file-manager, javascript, javascript-library, svelte, svelte-component, sveltejs, ui-components
• Language: JavaScript
• Homepage: https://svar.dev/svelte/filemanager/
• Size: 156 KB
• Stars: 28
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: readme.md
  • License: license.txt

Awesome Lists containing this project

README

        


	

# SVAR Svelte File Manager | File Explorer






:globe_with_meridians: [Website](https://svar.dev/svelte/filemanager/) • :bulb: [Getting Started](https://docs.svar.dev/svelte/filemanager/getting_started/) • :eyes: [Demos](https://docs.svar.dev/svelte/filemanager/samples/#/base/willow)





[![npm](https://img.shields.io/npm/v/wx-svelte-filemanager.svg)](https://www.npmjs.com/package/wx-svelte-filemanager)

[![License](https://img.shields.io/github/license/svar-widgets/filemanager)](https://github.com/svar-widgets/filemanager/blob/main/license.txt)

[![npm downloads](https://img.shields.io/npm/dm/wx-svelte-filemanager.svg)](https://www.npmjs.com/package/wx-svelte-filemanager)



SVAR File Manager is a flexible file explorer component for Svelte apps. It offers a familiar interface for browsing, organizing, and previewing files. Integrate it with any backend, whether you're using local storage, databases, or cloud services.



  



### :sparkles: Key features:

- Basic file operations: create, delete, copy, rename, cut, paste

- Download and upload files

- Files tree view

- List and tiles views

- File preview pane with file information (file size, type, modified date, etc)

- Split view to manage files between different locations

- Built-in search box

- Context menu and toolbar

- Keyboard navigation

- Used storage info

### :hammer_and_pick: How to Use

To use the widget, simply import the package and include the component in your Svelte file:

```svelte

	import { FileManager } from "wx-svelte-filemanager";

	const data = [

		{

			id: "/Code",

			date: new Date(2023, 11, 2, 17, 25),

			type: "folder",

		},

	];

	const driver = {

		used: 15200000000,

		total: 50000000000,

	};

```

### :computer: How to Modify

Typically, you don't need to modify the code. However, if you wish to do so, follow these steps:

1. Run `yarn` to install dependencies. Note that this project is a monorepo using `yarn` workspaces, so npm will not work

2. Start the project in development mode with `yarn start`

### :white_check_mark: Run Tests

To run the test:

1. Start the test examples with:

    ```sh

    yarn start:tests

    ```

2. In a separate console, run the end-to-end tests with:

    ```sh

    yarn test:cypress

    ```

### :speech_balloon: Need Help?

[Post an Issue](https://github.com/svar-widgets/filemanager/issues/) or use our [community forum](https://forum.svar.dev).