# files-uploader

> ts library, which creates files uploader

Latest version **1.0.0** (published 2019-11-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install files-uploader
pnpm add files-uploader
yarn add files-uploader
bun add files-uploader
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2019-11-26 |
| First published | 2019-11-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 845.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | neiasut |
| Maintainers | neiasut |
| Keywords | upload, file, drag, drop, typescript |

## Links

- npm: https://www.npmjs.com/package/files-uploader
- Repository: https://github.com/Neiasut/files-uploader
- Homepage: https://github.com/Neiasut/files-uploader#readme
- Issues: https://github.com/Neiasut/files-uploader/issues
- npm.io page: https://npm.io/package/files-uploader

## Dependencies (1)

- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.6.3

## Alternatives

- [unionfs](https://npm.io/package/unionfs.md) — 2.2M weekly downloads
- [path-starts-with](https://npm.io/package/path-starts-with.md) — 35.9K weekly downloads
- [redzip](https://npm.io/package/redzip.md) — 1.2K weekly downloads
- [vscode-anymatch](https://npm.io/package/vscode-anymatch.md) — 848 weekly downloads
- [@ledgerhq/coin-filecoin](https://npm.io/package/@ledgerhq/coin-filecoin.md) — 793 weekly downloads

## Recent versions

- 1.0.0 (latest) — 2019-11-26

## README

# files-uploader

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

## Setup

### add with:
#### npm
```cmd
npm install files-uploader --save
```
#### yarn
```cmd
yarn add files-uploader
```

### Add with tag script
```html
<link rel="stylesheet" href="dist/filesUploader.min.css">
<script src="dist/filesUploader.min.js"></script>
```
```js
new window.FilesUploader();
```

### ES6 import
```typescript
import FilesUploader from 'FilesUploader';
```

## Usage
```typescript
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*

```typescript
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

```typescript
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:

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

## Files

Add files in a constructor

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

## Public fields

#### elements: FilesUploaderListElements
```typescript
interface FilesUploaderListElements {
  input: HTMLInputElement;
  wrapper: Element;
  loader: Element;
  wrapperLists: Element;
  uploadingList: Element;
  completeList: Element;
  uploadingListWrapper: Element;
  completeListWrapper: Element;
}
```
#### settings: FilesUploaderSettings
#### configuration: FilesUploaderConfiguration
#### files: Queue<CompleteWrapper>

## Public methods

```typescript
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<any>
Remove a file from the server.

#### destroy() 
Destructor.

## Callbacks(dispatchers)

```typescript
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): 
```typescript
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:
```typescript
ComponentPerformer.addFactory('aliasFactory', factoryComponent);
```

---
_Source: https://npm.io/package/files-uploader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._