ReactJS File Uploader

A flexible React component for uploading files. Supports multiple files, progress feedback and upload / abort controls.

View Live Demo

Features

• Multiple files
• Progress feedback
• Upload / abort controls

Example

class VanillaExample extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            files: [],
        };
        this.uploadFiles = this.uploadFiles.bind(this);
        this.uploadFile = this.uploadFile.bind(this);
    }

    render() {
        return (
            <div>
                <input
                    type="file"
                    accept="image/*"
                    onChange={event => this.setState({files: this.state.files.concat(Array.from(event.target.files))})}
                    multiple
                />
                <FileManager
                    files={this.state.files}
                >
                    {this.uploadFiles}
                </FileManager>
            </div>
        )
    }

    uploadFiles(files) {
        return files.map(this.uploadFile);
    }

    uploadFile(file) {
        return (
            <FileUploader
                key={file.key}
                file={file}
                url='https://api.cloudinary.com/v1_1/dpdenton/upload'
                formData={{
                    file,
                    upload_preset: 'public',
                    tags: 'vanilla',
                }}
                readFile
            >
                {this.fileProgress}
            </FileUploader>
        )
    }

    static fileProgress({
    
        /*
        References to the Event objects.
        Initial state is null and each propert gets assigned on Event.
         */
        uploadReady,
        uploadStart,
        uploadProgress,
        uploadComplete,
        downloadStart,
        downloadProgress,
        downloadComplete,
        error,
        abort,
        timeout,

        /*
        The sequential state of the request
        enum {
            uploadReady, uploadStart, uploadProgress, uploadComplete, downloadStart
            downloadStart, downloadProgress, downloadComplete
        }
         */
        requestState,

        /*
        Function references to start / abort request
          */
        startUpload,
        abortRequest,

        /*
        Request Object reference (XMLHttpReqeust)
         */
        request,

        /*
        Response text Object (JSON)
         */
        response,

        /*
        Data of the file being uploaded (if readData props is true)
         */
        fileData,

     }) {
        return (
            <div>
                {fileData && <img src={fileData} width={200} alt="Preview"/>}
                {startUpload && <button onClick={startUpload}>Upload File</button>}
                {requestState && requestState}
            </div>
        )
    }

}

Options FileUploader

| Property | Type | Default | Description | | :------------------------------ | :----: | :----: | :------------------------------------------------------------------------------------------------------------------------------------------------------------ | | children(required) | func: (state) => React.Node | | Returns state of FileUploader instance. See above example for state structure. | | file(required) | object: File | | File objects are generally retrieved from a FileList object returned as a result of a user selecting files using the element, from a drag and drop operation's DataTransfer object, or from the mozGetAsFile() API on an HTMLCanvasElement. | | url(required) | string | | Upload url endpoint. | | formData | object: { key: value } | {} | key: value formData to be sent with the request. If sending the file this needs to be explicit e.g. formData={{file_field: file}} | | autoUpload | bool | false | If true immediately start upload when file is passed to Component. | | readFile | bool | false | If true provides a reference to the file data in the component state returned by children | | onUploadReady | func: (XMLHttpRequest) => void |() => {} | Hook to uploadReady event. | onUploadStart | func: (ProgressEvent) => void |() => {} | Hook to uploadStart event. | onUploadProgress | func: (ProgressEvent) => void |() => {} | Hook to uploadProgress event. | onUploadComplete | func: (ProgressEvent) => void |() => {} | Hook to uploadComplete event. | onDownloadStart | func: (Event) => void |() => {} | Hook to downloadStart event. | onDownloadComplete | func: (Event) => void |() => {} | Hook to downloadComplete event. | onError | func: (Event) => void |() => {} | Hook to error event. | onAbort | func: (Event) => void |() => {} | Hook to abort event. | onTimeout | func: (Event) => void |() => {} | Hook to timeout event. | onFileDataReady | func: (Event) => void |() => {} | Hook to fileDataReady event.

Options FileManager

The FileManager is an optional HOC that manages the files that are sent to the FileUploader.

It ensures no duplicate are sent to be uploaded and provides each file a unique key attribute.

| Property | Type | Default | Description | | :------------------------------ | :----: | :----: | :------------------------------------------------------------------------------------------------------------------------------------------------------------ | | children(required) | func: (file) => React.Node | | Returns File from Array of File objects. | | files(required) | array: File | | Array or FileList of File objects. |

License

MIT