UploadChecker

Check and constrain type/size/resolution while uploading files in pure front-end way.

Demo

You can view the live demo here.

Browsers Supporting

Upload checker support all browsers that support Blob URLs, you can check them here：

http://caniuse.com/#feat=bloburls

Installation

npm install upload-checker

Data structures

If using typescript, you can check the 'src/types.ts' to view and use those in your code in this way:

import {TFiles, IFileInfo} from 'upload-checker';

Following tables show all types and interfaces:

Types

|Name|Value|Description| |-|-|-| |TFile|File|A HTML file element.| |TFileType|string|Type of file, like 'image/png'.| |TFileTypes|TFileType[]|Array of TFile.| |TImageConstraintKey|'maxBytesPerPixel' | 'maxSize' | 'maxWidth'|All constraints for image files.| |TVideoConstraintKey|'maxBytesPerPixelPerSecond' | 'maxSize' | 'maxWidth' | 'maxDuration'|All constraints for video files.| |TError| 'type' | 'width' | 'size' | 'duration' | 'bytes' | 'unknown'|Error types.|

IFileInfo

|Name|Required|Type|Description| |-|:-:|-|-| |Type|√|TFileType|Type of file.| |width|x|number|Width of image or video.| |height|x|number|Height of image or video.| |size|x|number|Size (width x height) of image or video.| |duration|x|number|Duration of video.|

ICheckError

|Name|Required|Type|Description| |-|:-:|-|-| |name|√|TError|Type of error.| |currentValue|√|number | string[] | string|Current value of wrong constraint.| |limitValue|√|number | string[] | string|Max value of wrong constraint.| |stack|√|string|Error stack.| |message|√|string|Error message.|

ICheckResponse

|Name|Required|Type|Description| |-|:-:|-|-| |file|√|TFile|Current file.| |info|√|IFileInfo|Info of file.| |error|x|ICheckError|Error of checking if something wrong.|

API

Upload checker provides rich api for different requirements. You can import theme in two ways:

import {checkType} from 'upload-checker';

or

import {checkType} from 'upload-checker/dist/TypeChecker';

In the second way, only module TypeChecker will be packed to your source file.

checkType

(file: TFile,types: TFileTypes) => Promise<ICheckResponse>

In module upload-checker/TypeChecker.

checkType(file, types)
.then(res => {......})
.catch(res => {......});

TypeChecker

An class for storing types' constraints then could be reused with check method.

In module upload-checker/TypeChecker.

|Method|Type|Description| |-|-|-| |constructor|(types: TFileTypes = []) => void|Constructor function, if types is empty, all file types will be allowed.| |setTypes|(types: TFileTypes) => void|Set types of checker.| |check|(file: TFile) => Promise<ICheckResponse>|Check file with current types.|

const checker = new TypeChecker(['image/png']);
checker.setTypes(['image/jpeg']);
checker.check(file)
.then(res => {......})
.catch(res => {......});

checkImage

(file: TFile, maxBytesPerPixel: number, maxSize: number, maxWidth?: number) => Promise

In module upload-checker/ImageChecker.

checkImage(file, maxBytesPerPixel, maxSize, maxWidth)
.then(res => {......})
.catch(res => {......});

ImageChecker

An class for storing image's constraints then could be reused with check method.

In module upload-checker/ImageChecker.

|Method|Type|Description| |-|-|-| |constructor|(maxBytesPerPixel: number, maxSize: number, maxWidth?: number) => void|Constructor function, if max[attr] is 0, checker will not check that.| |setAttr|(key: TImageConstraintKey, value: number) => void|Set attr of checker.| |check|(file: TFile) => Promise<ICheckResponse>|Check file with current constraint.|

const checker = new ImageChecker(.5, 1280 * 720);
checker.setAttr('maxWidth', 1280);
checker.check(file)
.then(res => {......})
.catch(res => {......});

checkVideo

(file: TFile, maxBytesPerPixelPerSecond: number, maxDuration: number, maxSize: number, maxWidth?: number) => Promise<ICheckResponse>

In module upload-checker/VideoChecker.

checkVideo(file, maxBytesPerPixelPerSecond, maxDuration, maxSize, maxWidth)
.then(res => {......})
.catch(res => {......});

VideoChecker

An class for storing video's constraints then could be reused with check method.

In module upload-checker/VideoChecker.

|Method|Type|Description| |-|-|-| |constructor|(maxBytesPerPixelPerSecond: number, maxDuration: number, maxSize: number, maxWidth?: number) => void|Constructor function, if max[attr] is 0, checker will not check that.| |setTypes|(types: TFileTypes) => void|Set attr of checker.| |check|(file: TFile) => Promise<ICheckResponse>|Check file with current constraint.|

const checker = new VideoChecker(.5, 10, 1280 * 720);
checker.setAttr('maxWidth', 1280);
checker.check(file)
.then(res => {......})
.catch(res => {......});

UploadChecker

A react component for better usage.

Props

|Name|Type|Description| |-|-|-| |Types|IFileTypes|Same as parameters of constructor of TypeChecker.| |multiple|boolean|Could user select multiple files.| |onDrop|(res: ICheckResponse) => void|A callback will be called after file is checked.| |imageConstraint|Same as parameters of constructor of ImageChecker.|Constraints for image files.| |videoConstraint|Same as parameters of constructor of VideoChecker.|Constraints for video files.| |children|JSX.Element | string|Children element.| |className|string|ClassName for root element.| |style|any|Style for root element.|

All others props will be passed to input.

Contribute

Development

Run:

npm run dev

then open localhost:4444.

Unit test

Run:

npm run unittest

then find reports in the report folder.

Build

Run:

npm run build

License

Copyright © 2017, 戴天宇, Tianyu Dai (dtysky < [email protected] >). All Rights Reserved. This project is free software and released under the MIT License.