@j-lamberts/react-file-upload

react-file-uploads

[](https://circleci.com/gh/JohannesLamberts/react-file-uploads)

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

Name	Type	Default	Description
url *	string	(required)	HTTP-URL
children *	(props: FileUploaderChildrenProps) => React.ReactNode	(required)	child-component
runManual	boolean	false	Don't run upload on handleFiles() - use runManual instead
keepOnFinish	boolean	false	Keep uploaded files in queue
fieldName	string	'file'	Form-Field
method	'POST' / 'PATCH' / 'PUT'	'POST'	HTTP-Method
headers	Object	{}	HTTP-Headers

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

Name	Type	Default	Description
onDrop *	(files: File[]) => void	(required)	handler function
children *	React.ReactNode;	(required)
className	string	undefined
classNameActive	string	undefined	class-name on dragActive
style	React.CSSProperties	undefined

FileSelect

Name	Type	Default	Description
onChange: (files: File[]) => void	(required)	handler function
children	React.ReactNode	(required)
multiple	boolean	false
className	string	undefined
style	React.CSSProperties	undefined