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 < [e-mail] >). All Rights Reserved. This project is free software and released under the MIT License.