@boewa-software/react-async-uploader/src/js/UploaderComponent.jsx

React Uploder

import React from 'react';
import DropZone from "./DropZone";
import BrowseButton from "./BrowseButton";

const UploaderComponent = ({ assignDrop, assignBrowse, uploads, uploaderState, start, pause, reset }) => (
    <div>
        <p>
            <BrowseButton assignBrowse={assignBrowse}>
                Select File
            </BrowseButton>
        </p>
        <div>
            <DropZone
                assignDrop={assignDrop}
                style={{ padding: '3rem 5rem', border: 'dashed grey 2px', display: 'inline-block'}}
            >
                DROP ZONE
            </DropZone>
        </div>
        <ul>
            {uploads.map(upload => (
                <li key={upload.uniqueIdentifier}>
                    {upload.name} (Size: {upload.size}, Progress: {upload.progress})
                    {upload.error && (
                        <span className={'alert alert-danger'}>
                                    Error: {upload.error}

                            <button type={'button'} onClick={() => upload.retry()}>
                                        Retry
                                    </button>
                                </span>
                    )}
                    <button type={'button'} onClick={() => upload.cancel()}>
                        Cancel
                    </button>
                </li>
            ))}
        </ul>
        <p>
            State: {uploaderState}
        </p>
        <p>
            <button type={'button'} onClick={start}>
                Start
            </button>
            <button type={'button'} onClick={pause}>
                Pause
            </button>
            <button type={'button'} onClick={reset}>
                Reset
            </button>
        </p>
    </div>
);
export default UploaderComponent;