pure-upload

Pure-upload

The pure JS (TS) upload library with no dependencies compatible with Google Chrome, Firefox, IE10+, Edge and modern mobile browsers.

Installation

1. Download as a ZIP file directly from GitHub pages and include to your project.
2. Install with npm by npm install pure-upload --save or yarn add pure-upload.
3. Install with bower by bower install pure-upload.

Example

See a simple example.

Api

Using NPM package:

Import pure-upload with standard import syntax:

import * as pu from "pure-upload";

Uploader

Uploader manages upload queue and registers upload areas.

Initialization:

let uploader = pu.getUploader(uploadQueueOptions, uploadQueueCallbacks);

Upload queue options

maxParallelUploads?: number;
parallelBatchOffset?: number;
autoStart?: boolean;
autoRemove?: boolean;

Upload queue callbacks

onProgressCallback?: (file: IUploadFile) => void;
onCancelledCallback?: (file: IUploadFile) => void;
onFinishedCallback?: (file: IUploadFile) => void;
onUploadedCallback?: (file: IUploadFile) => void;
onErrorCallback?: (file: IUploadFile) => void;
onUploadStartedCallback?: (file: IUploadFile) => void;
onFileAddedCallback?: (file: IUploadFile) => void;
onFileRemovedCallback?: (file: IUploadFile) => void;
onAllFinishedCallback?: () => void;
onQueueChangedCallback?: (queue: IUploadFile[]) => void;
onFilesAddedErrorCallback?: (files: IUploadFile[]) => void;

Upload area

Upload area defines element registered in Uploader.

Registration:

let uploadArea = uploader.registerArea(element, uploadAreaOptions);

Unregistration:

uploader.unregisterArea(uploadArea);

Upload area options

url: string;
method: string;
withCredentials?: boolean;
headers?: { [key: string]: string; };
params?: { [key: string]: string; };
localizer?: ILocalizer;
maxFileSize?: number;
allowDragDrop?: boolean | (() => boolean);
clickable?: boolean | (() => boolean);
accept?: string;
multiple?: boolean;
validateExtension?: boolean;
validateMissingExtension?: boolean;
manualStart?: boolean;
allowEmptyFile?: boolean;
dragOverStyle?: string;
dragOverGlobalStyle?: string;
useCapture?: boolean;
onFileAdded?: (file: IUploadFile) => void;
onFileSelected?: (file: IUploadFile) => void;
onFilesSelected?: (file: IUploadFile[]) => void;
onFileError?: (file: IUploadFile) => void;
onFileCanceled?: (file: IUploadFile) => void;

Upload area - manual starting

start(autoClear?: boolean, files?: IUploadFile[]): void;
clear(files?: IUploadFile[]): void;

Localizer

fileSizeInvalid: (maxFileSize: number) => string;
fileTypeInvalid: (accept: string) => string;
invalidResponseFromServer: () => string;

Upload file

Standard File object extended with additional informations and methods to manage a file in queue.

guid: string;
uploadStatus?: UploadStatus;
responseCode: number;
responseText: string;
progress: number;
sentBytes: number;
errorCode: ErrorCode;
cancel: () => void;
remove: () => void;
start: () => void;

Upload status

File statuses accessible by pu.uploadStatus.

How to develop

Current gulp build tool requires node v16 or v17.

Debug and watch

npm debug-watch

Build and watch example

npm run example-watch

Run example solution

node example

Build package

npm run build

Library used by Quadient.

MIT, Copyright © 2015 Tomáš Růt

Changelog

8.4.0

Updated TypeScript to 5.6.3.