Normally Palatable Mango

    upload-checker
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.1 • Public • Published

    UploadChecker

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

    Test status Coverage

    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.

    Install

    npm i upload-checker

    DownloadsWeekly Downloads

    0

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    29.3 kB

    Total Files

    15

    Last publish

    Collaborators

    • dtysky