files-uploader

files-uploader is a ts library, which creates files uploader. Size: min: 38 kB, gzip: 10.39 kB.

Setup

add with:

npm

npm install files-uploader --save

yarn

yarn add files-uploader

Add with tag script

<link rel="stylesheet" href="dist/filesUploader.min.css">
<script src="dist/filesUploader.min.js"></script>

new window.FilesUploader();

ES6 import

import FilesUploader from 'FilesUploader';

Usage

const instance = new FilesUploader(
  <InitElement>,
  <settings>,
  <arrThemes>,
  <files>
);

InitElement

Initial element should by of 2 types: string or Element.

Settings

Interface: FilesUploaderSettings;

| field name | required | default value | type/interface | info | |------------|----------|---------------|----------------|------| | server | false | * | FilesUploaderActions | server settings | maxSize | false | 10 * 1024 * 1024 | number | max size of each file | maxFiles | false | 3 | number | maximum number of files for uploading | acceptTypes | false | [] | string[] | array of accepted file types | autoUpload | false | false | boolean | autoload of files | labels | false | ** | FilesUploaderLabels | labels | statusTexts | false | *** | FilesUploaderStatusTexts | statuses texts | errorTexts | false | **** | FilesUploaderErrorTexts | errors texts | imageView | false | false | boolean | variable for image view | factoryUploadingComponentAlias | false | 'defaultUploadingComponent' | string | factory alias for uploading component | factoryCompleteComponentAlias | false | 'defaultCompleteComponent' | string | factory alias for complete component

Server settings*

interface FilesUploaderActions {
  upload?: FilesUploaderActionInfo;
  remove?: FilesUploaderActionInfo;
}

interface FilesUploaderActionInfo {
  url?: string;
  headers?: { [key: string]: string };
  onData?: (data: FilesUploaderSendData) => FilesUploaderSendData;
}

interface FilesUploaderSendData {
  [key: string]: string | File;
}

| field name | default value | type/interface | info | |------------|---------------|----------------|------| | upload | { url: '/' } | FilesUploaderActionInfo | upload settings | remove | { url: '/' } | FilesUploaderActionInfo | remove settings

Labels**

| field name | required | default value | type/interface | info | |------------|----------|---------------|----------------|------| | loader | false | 'Drag file here or select on device' | string | text on loader | inProcessList | false | 'List uploading files' | string | label for uploading files list | completeList | false | 'completeList' | string | label for completed files list

Statuses Texts***

| field name | required | default value | type/interface | info | |------------|----------|---------------|----------------|------| | waitingUpload | false | 'Waiting upload' | string | waiting status text | uploading | false | 'Uploading file' | string | uploading status text | complete | false | 'File on server' | string | completed status text | error | false | 'Error' | string | error status text | removing | false | 'Removing' | string | removing status text

Errors Texts****

| name field | required | default value | type/interface | |------------|----------|---------------|----------------| | moreMaxFiles | false | 'max number of files is exceeded' | string | | size | false | 'max file size is exceeded' | string | | type | false | 'file extension error' | string | | network | false | 'network error' | string | | data | false | 'data error' | string | | remove | false | 'file can not be removed' | string | | upload | false | 'file can not be uploaded' | string |

Themes

Add a theme

import FilesUploader from 'FilesUploader';

interface Theme {
  settings?: FilesUploaderSettings;
  afterConstructor?: (instance: FilesUploader, themeSettings: FilesUploaderSettings) => void;
}

FilesUploader.themes.add('testSettings', {
  settings: {
    acceptTypes: ['exe', 'jpg'],
    maxSize: 6 * 1204 * 1024,
    autoUpload: false,
    server: {
      upload: {
        url: 'http://files-uploader-back/upload.php'
      },
      remove: {
        url: 'http://files-uploader-back/remove.php'
      }
    }
  }
});

Use a theme:

const instance = new FilesUploader(
  '#exampleImage',
  {
    acceptTypes: ['png', 'jpg'],
    autoUpload: true,
    imageView: true
  },
  ['testSettings']
);

Files

Add files in a constructor

const instance2 = new FilesUploader(
  '#exampleImage',
  {},
  [],
  [
    {
      name: 'test.txt',
      size: 400,
      path: '/test.txt',
      extension: 'txt'
    }
  ]
);

Public fields

elements: FilesUploaderListElements

interface FilesUploaderListElements {
  input: HTMLInputElement;
  wrapper: Element;
  loader: Element;
  wrapperLists: Element;
  uploadingList: Element;
  completeList: Element;
  uploadingListWrapper: Element;
  completeListWrapper: Element;
}

settings: FilesUploaderSettings

configuration: FilesUploaderConfiguration

files: Queue

Public methods

interface FilesUploaderFileInfo {
  readonly name: string;
  readonly size: number;
  readonly extension: string;
}

interface FilesUploaderFileData extends FilesUploaderFileInfo {
  path: string;
  externalData?: object;
}

addFile(data: FilesUploaderFileData): void

Add a file. Invoke callbacks for FilesUploaderAddFileToQueueEvent.

addFiles(arrFiles: FilesUploaderFileData[]): void

Add files array.

removeFile(path: string): Promise

Remove a file from the server.

destroy()

Destructor.

Callbacks(dispatchers)

type Handler<T> = (event: T) => void;

enum FilesUploaderEvents {
  DidAddFileToQueue = 'didAddFileToQueue',
  DidRemoveFileFromQueue = 'didRemoveFileFromQueue',
  DidAddFileToCompleteList = 'didAddFileToCompleteList',
  DidRemoveFileFromCompleteList = 'didRemoveFileFromCompleteList',
  DidUploadFile = 'didUploadFile',
  DidRemoveFile = 'didRemoveFile'
}

class EventDispatcher<T> {
    register(handler: Handler<T>) {}
    unregister(handler: Handler<T>){}
}

instance.dispatchers = {
    [FilesUploaderEvents.DidAddFileToQueue]: new EventDispatcher<FilesUploaderAddFileToQueueEvent>(),
    [FilesUploaderEvents.DidRemoveFileFromQueue]: new EventDispatcher<FilesUploaderRemoveFileFromQueueEvent>(),
    [FilesUploaderEvents.DidAddFileToCompleteList]: new EventDispatcher<FilesUploaderAddFileToListEvent>(),
    [FilesUploaderEvents.DidRemoveFileFromCompleteList]: new EventDispatcher<FilesUploaderRemoveFileFromListEvent>(),
    [FilesUploaderEvents.DidUploadFile]: new EventDispatcher<FilesUploaderFileUploadEvent>(),
    [FilesUploaderEvents.DidRemoveFile]: new EventDispatcher<FilesUploaderFileRemoveEvent>()
};

Work with the server

Upload

send instance FormData to <instance.configuration.server.upload.url> with key file: File. SUCCESS: response HTTP status code: 200 with data (json):

interface SuccessResponse {
    path: string;
    name: string;
    size: number;
    extension: string;
}

Remove

send json object to <instance.configuration.server.remove.url> with key path. SUCCESS: response HTTP status code: 204

Custom components

Create custom component: create an implementation class interface CompleteComponent or UploadingComponent (/src/interfaces/interfaces.ts), create factory for this class.

Examples: /src/DefaultCompleteComponent.ts, /src/DefaultUploadingComponent

Add factory custom component:

ComponentPerformer.addFactory('aliasFactory', factoryComponent);