@j-lamberts/react-file-upload v0.1.0

Features

This packages provides some easy-to-use react components for file uploads. It contains

• FileUploader to manage all uploads
• FileDropzone as a simple dropzone wrapper-component
• FileSelect as a simple wrapper around <input type="file" />

Example

Full-auto

import {
    Button,
    Icon,
    LinearProgress
}                                 from 'material-ui';
import * as React                 from 'react';
import {
    FileDropzone,
    FileSelect,
    FileUploader
}                                 from 'react-file-uploads';

export default () => (
    <FileUploader
        keepOnFinish={true}
        url={'http://localhost:4005/files'}
    >
        {({ handleFiles, queue }) => (
            <div>
                <FileDropzone onDrop={handleFiles}>
                    {queue.map((el, index) => (
                        <div key={index}>
                            {index} {el.name}
                            <LinearProgress
                                variant={el.progressTotal
                                    ? 'determinate'
                                    : 'indeterminate'}
                                value={el.progressLoaded / el.progressTotal * 100}
                            />
                        </div>
                    ))}
                    DROP FILES HERE
                </FileDropzone>
                <div>
                    Uploaded: {queue.length} <br/>
                    Waiting: {queue.filter(el => !el.ready).length}<br/>
                    Ready: {queue.filter(el => el.ready).length}
                </div>
                <FileSelect
                    onChange={handleFiles}
                    multiple={true}
                >
                    <Icon>file_upload</Icon>Upload
                </FileSelect>
            </div>
        )}
    </FileUploader>
);

Manual run()

import {
    Button,
    Icon,
    LinearProgress
}                                 from 'material-ui';
import * as React                 from 'react';
import {
    FileDropzone,
    FileSelect,
    FileUploader
}                                 from 'react-file-uploads';

export default () => (
    <FileUploader
        runManual={true}
        keepOnFinish={true}
        url={'http://localhost:4005/files'}
    >
        {({ handleFiles, queue, runManual }) => (
            <div>
                <!--- as above -->
                <Button onClick={runManual}>
                    <Icon>check</Icon> Run
                </Button>
            </div>
        )}
    </FileUploader>
);

Components

FileUploader

interface FileUploaderChildrenProps {
    handleFiles: ((list: File[]) => void);
    queue: FileUpload[];
    runManual: () => void
}

interface FileUpload {
    progressTotal: number;
    progressLoaded: number;
    error: boolean;
    ready: boolean;
    upload: XHRUpload;  // don't access directly
    name: string;
}

FileDropzone

FileSelect