Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Grafikart/filemanager-element
A simple file browser distributed as a custom element
https://github.com/Grafikart/filemanager-element
Last synced: 3 months ago
JSON representation
A simple file browser distributed as a custom element
- Host: GitHub
- URL: https://github.com/Grafikart/filemanager-element
- Owner: Grafikart
- License: mit
- Created: 2021-05-04T16:21:21.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-05-12T19:28:50.000Z (over 2 years ago)
- Last Synced: 2024-07-31T09:01:03.532Z (3 months ago)
- Language: TypeScript
- Homepage:
- Size: 143 KB
- Stars: 78
- Watchers: 3
- Forks: 13
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# file-manager custom element
[](http://npm.im/filemanager-element)
[](https://github.com/Grafikart/FileManagerJS/actions/workflows/test.yml)
You want a simple file browser for your website, without the hassle of a front-end framework ? Here is a simple custom
element for you.
- [Demonstration (codesandbox.io)](https://km7mr7.csb.app)
First register the custom element (the lang is infered from the html "lang" attribute)
```js
import {FileManager} from 'filemanager-element'
import 'filemanager-element/FileManager.css'
FileManager.register();
```
Then you can simply use your custom element whenever you want
```html
```
You just have to implement the API following this [Open API specification](openapi.yml) and it will work out of the box.
To interface the editor with your system (for instance when a file is selected) you can simply bind listeners
```js
const filemanager = document.querySelector("file-manager");
filemanager.addEventListener("close", () => {
console.log("close");
});
filemanager.addEventListener("selectfile", e => {
console.log("fileSelected", e.detail);
});
```
## Attributes
| Attribute | Description | Default |
|--------------|-------------------------------------------------------------|---------|
| endpoint | The base url for the file and folder API | |
| readonly | Do not allow file deletion or creation | false |
| layout | Files layout "rows" or "grid" | grid |
| lazy-folders | Should all folder be lazy loaded with a new call to the API | false |
| hidden | Work like the default HTML attribute | false |
## Events
| Name | Description |
|-------------|----------------------------------------------------|
| close | The user clicked on the overlay to close the modal |
| fileselect | The use selected a file |
## Options
Options can be set on the `register()` method as a second argument. All the options are optional
| Name | Type | Description |
|-----------------|----------|--------------------------------------------|
| readOnly | bool | Do not allow file deletion or creation |
| endpoint | string | Endpoint for the REST API |
| httpHeaders | object | Additional headers to send to the endpoint |
| getFiles() | function | Custom API to retrieve files |
| getFolders() | function | Custom API to retrieve folders |
| deleteFile() | function | Custom API to delete file |
| deleteFolder() | function | Custom API to delete folder |
| uploadFile() | function | Custom API to upload file |
| createFolder() | function | Custom API to create folder |
## Custom API
If you do not use a traditional REST API you can overwrite the method used to fetch the data.
```ts
import type {File as FileType, Folder} from 'filemanager-element'
FileManager.register('my-file-manager', {
getFiles (folder?: Folder): Promise {
},
getFolders (parent?: Folder): Promise {
},
createFolder (params: Pick): Promise {
},
deleteFile (file: FileType): Promise {
},
deleteFolder (folder: Folder): Promise {
},
uploadFile (file: File, folder: Folder): Promise {
}
})
```