files-uploader v1.0.0

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;

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;
}

Labels**

Statuses Texts***

Errors Texts****

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);