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

React Uploder

import React from 'react';
import PropType from 'prop-types';

import DropZone from "./DropZone";
import BrowseButton from "./BrowseButton";

const InputComponent = props => (
    <input
        type={'hidden'}
        // onChange-Handler unschädlich machen, da wir nur von außen schreiben
        onChange={() => null}
        {...props}
    />
);

const ContentComponent = ({ assignBrowse, reset, value, id, name }) => (
    <div className={'upload-input'}>
        <InputComponent id={id} name={name} value={value ? value.identifier : ''} />
        {value && (
            <>
                <span>{value.name}</span>
                <button
                    type={'button'}
                    onClick={() => reset()}>
                    Reset
                </button>
            </>
        )}
        <BrowseButton assignBrowse={assignBrowse}
                      className={'browse-button'}>
            Select File
        </BrowseButton>
    </div>
);

const UploadInputComponent = ({ dropZoneProps, ...props }) => (
    <DropZone assignDrop={props.assignDrop} {...dropZoneProps}>
        <ContentComponent {...props} />
    </DropZone>
);
UploadInputComponent.propTypes = {
    dropZoneProps: PropType.object,
};
UploadInputComponent.defaultProps = {
    dropZoneProps: {}
};

export default UploadInputComponent;