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

React Uploder

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

import MultipleUploadsInputComponent from "./MultipleUploadsInputComponent";
import Uploader from "./Uploader";

class MultipleUploadsInput extends React.Component
{
    constructor(props)
    {
        super(props);

        let valuesByIdentifier = {};
        const values = this.props.initialValue.map(v => {
            valuesByIdentifier[v.identifier] = v;
            return v.identifier;
        });

        this.state = {
            values,
            valuesByIdentifier,
        };
    }
    
    handleFileSuccess(upload)
    {
        const file = upload.responseContent.upload;

        // Neue datei nur dann einbinden, wenn sie nicht schon in der Liste vorhanden ist, dann nur aktualisieren.
        const values = 0 > this.state.values.indexOf(file.identifier)
            ? [
                ...this.state.values,
                file.identifier
            ]
            : [...this.state.values];

        const valuesByIdentifier = {
            ...this.state.valuesByIdentifier,
            [file.identifier]: file
        };

        this.setState({
            values,
            valuesByIdentifier
        });
    }

    removeFile(identifier)
    {
        const values = this.state.values.filter(v => v !== identifier);
        let valuesByIdentifier = { ...this.state.valuesByIdentifier};
        delete valuesByIdentifier[identifier];

        this.setState({
            values,
            valuesByIdentifier
        });
    }

    render()
    {
        const {
            values,
            valuesByIdentifier
        } = this.state;

        const {
            componentProps,
            initialValue,
            ...props
        } = this.props;

        return (
            <Uploader
                componentProps={{
                    values: values.map(identifier => ({
                        ...valuesByIdentifier[identifier],
                        remove: () => this.removeFile(identifier)
                    })),
                    ...componentProps
                }}

                onFileSuccess={(file) => this.handleFileSuccess(file)}

                clearFileOnSuccess={true}

                {...props}
            />
        );
    }
}
MultipleUploadsInput.propTypes = {
    ...Uploader.propTypes,

    initialValue: PropType.array,
    component: PropType.any,
    componentProps: PropType.object
};
MultipleUploadsInput.defaultProps = {
    initialValue: [],
    component: MultipleUploadsInputComponent,
    componentProps: {}
};

export default MultipleUploadsInput;