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 < dtysky@outlook.com >). All Rights Reserved. This project is free software and released under the MIT License.