Skip to main content

File Upload Input Chunked - Vivid Component

File upload input chunked is a component for handling harge files in small manageable pieces.

Props​

base64: boolean (Should chunks be base64 encoded before passing to onChunk)
base64prefix: boolean (Do chunks need the 'data:base64;' prefix?)
chunkSize: number (how large (in bytes) should the chunks be?)
startAtChunk: number (which chunk to start handling from. Initial offset calculated with chunkSizer and startAtChunk)

// handlers
onInit: () => void (Function which runs before upload (Promises handled appropriately))
onChunk: (chunkNumber, chunk) => void (Function which handles each chunk)
onComplete: () => void (Function which is called after last chunk is handled)

// Passed in components for default implementation
FileInput: React.Component,
fileTypes: object: (Object which contains acceptable filetypes AND extensions)
SubmitButton: React.Component (Submit button component)

children: ({ onSubmit }) => React.Component | undefined

Use case​

  • Uploading large video files to Spoke
  • Uploading postcode files (large 10GB CSVs)

Usage​


class UsageWithRenderProps extends React.Component {
    render() {
        const { onInit, onChunk, onComplete } = this.props;

        return (
            <FileUploadInputChunked
                onInit={onInit}
                onChunk={onChunk}
                onComplete={onComplete}
            >
                (({ onSubmit }) => (
                    <div>
                        {/** your JSX which leverages the onSubmit provided by chunked upload */}
                    </div>
                ))
            </FileUploadInputChunked>
        );
    }
}


class DefaultUsage extends React.Component {
    render() {
        const {
            onInit,
            onChunk,
            onComplete,
            FileInput,
            SubmitButton
        } = this.props;

        return (
            <FileUploadInputChunked
                onInit={onInit}
                onChunk={onChunk}
                onComplete={onComplete}

                {/** OPTIONAL: If not provided, default file input and submit button
                               implementations provided */}
                FileInput={FileInput}
                SubmitButton={SubmitButton}
            />
        );
    }
}

// See .stories.js for more examples!

Development​

Install dependencies

$ yarn

Available Commands

$ yarn start              # starts storybook, for visually testing file-upload-input-chunked
$ yarn test               # runs all units tests
$ yarn test:watch         # runs unit tests when files change
$ yarn build              # bundles the package for production

Copyright (c) 2019 Rex Software All Rights Reserved.