File Manager

Preview

Module & Import

import { FileManager } from 'gadjet/dist/module/ui/file-manager/file-manager.js';

Usage

To use FileManager, it must be imported separately since it's not included by default in gadjet module & bundle.

In an example codes below import the standalone FileManager bundle ( ~80KB )

Note

Import FileManager module together with Gadjet with Javascript building tool (E.g. Parcel) can reduce FileManager size to just about ~20KB

js <script defer>

import { FileManager } from 'gadjet/dist/module/ui/file-manager/file-manager.bundle.js';

FileManager.define('el-file-manager');
FileManager.tagStyle({
    buttonColor: 'blue',
    deleteButtonColor: 'red',
    progressColor: 'blue',
    completeColor: 'green',
    errorColor: 'red'
})
const fm = document.querySelector('el-file-manager');
fm.loadFiles(['1.jpg', '2.jpg', '3.jpg']);

html

<el-file-manager uploadUrl="./"></el-file-manager>

Element API

propuploadURL: string = './'

URL for upload with HTTP POST

fnloadFile(url: string): void

Load file from a URL to File object and display thumbnail.

fnloadFiles(urls: Array<string>): void

Load files from list of URL and display thumbnails.

fnopenFileSelector(): void

Open files selector

fnsend(): void

Upload all files separately to uploadURL by HTTP POST.

fndelete(): void

Remove all files and send HTTP DELETE to each file's url.