FileUploader issue per deleted file and unwanted file list with multiple

[epichiori]

It seems there are two bugs in FileUploader component used in a single file uploader mode.

Using the FileUploader component an icon with the state is visible on the right of the filename.
If you try to delete the file and then submit the upload the file is sent even if it has been removed.
Files seems to be removed only from html nodes and not from array map.

I'm using this component for single file to upload but even if multiple prop is set to false, if another file is chosen it is added to the file list instead of replace the old file. It seems only a visualization issue because only the last selected file is send in case of submit.

This are the requested information from Issues template:

Those problems are been verified from chrome and Firefox at latest version with the wfp/ui version 1.2.0-alpha.29.

I'm working on Pace, Reassignment projects.

Steps to reproduce the issue:
Try to choose a file and remove it. Then try to send the file with a submit button.

Use the component with multiple prop at false and select a file. If you repeat the operation the file list will grow up.

Additional information

• Code:

import React, { useState, useRef } from 'react';
import { Button } from '@wfp/ui';
import { FileUploader } from '@wfp/ui';
import { fetchApi } from '../../api.js';
import PropTypes from 'prop-types';

export function Uploader() {
    const extensions = [".csv", ".txt"];
    const uploader = useRef( null );
    const [file, setUploadFile] = useState( null );
    const [status, setUploadStatus] = useState( 'edit' );

    const fileChange = e => {
        if ( e.target.files[0] !== null ) {
            setUploadStatus( 'edit' );
            setUploadFile( e.target.files[0] );
        } else {
            setUploadFile( null );
        }
    }

    const onSubmit = e => {
        e.preventDefault()

        if ( file !== null ) {
            console.log( file ); // TODO: debug

            setUploadStatus( 'uploading' );

            const apiData = {};
            apiData['file'] = file;
            fetchApi( '/some/API_URI>', {
                method: 'POST',
                data: apiData
            } ).then( success => {
                setUploadStatus( 'complete' );
                console.log( 'success' ); // TODO: debug
                setUploadFile( null );
            } ).catch( error => {
                uploader.current.clearFiles();
                console.log( 'error: ', error ); // TODO: debug
            } ).finally(() => {
                console.log( 'finally' ); // TODO: debug
            } );
        }
    }
    
    return (
        <div className="PositionRoleUploader">
            <form onSubmit={onSubmit}>
                <FileUploader id="file"
                    ref={uploader}
                    type="button"
                    disabled={file === null}
                    accept={extensions}
                    filenameStatus={status}
                    multiple={false}
                    buttonLabel="Select file"
                    onChange={( e ) => { fileChange( e ) }}>
                </FileUploader>
                <br />
                <Button type="submit" disabled={file === null}>
                    Upload position roles
                </Button>
            </form>
        </div>
    );
}

export default PositionRoleUploader;

[Utzel-Butzel]

FileUploader is replaced by react-dropzone. Thanks for the report and sorry for the late response!