React Final Form File Field

---

Easily add a file upload field to your react-final-form form. FileField is agnostic about; how you store your files in the field, how you upload files, and how you display the files / uploader. But provides tools to make this easier.

Installation

Update this when published

Examples

see Storybook

Basic Usage

The FilesField registers a field array, and provides props to render your file uploader.

<Form onSubmit={onSubmit} mutators={arrayMutators}>
    {({ handleSubmit }) => (
    <form onSubmit={handleSubmit}>
        <FilesField name="files" onFileLoad={onFileLoad}>
        {({ uploadFiles, files }) => (
            <>
            // render uploader
            <button onClick={uploadFiles}>Upload Files</button>

            //render files
            {files.map((name, index, file) => (<p>file</p>))}
            </>
        )}
        </FilesField>
    </form>
    )}
</Form>;

However you can also use the useFilesField hook to achieve just the same thing. You just have to make sure you render the input that is used under-the-cover, the hook provides everything you need to pass it though.

const MyFileUploader = ({fieldName, onFileLoad, config}) => {
    const { uploadFiles, inputProps, files } = useFilesField(
    fieldName,
    onFileAdd,
    config
    )
    return(
    <>
        // this will be hidden
        <input {...inputProps} />

        // render uploader
        <button onClick={uploadFiles}>Upload Files</button>

        //render files
        {files.map((name, index, file) => (<p>file</p>))}
    </>
   )
}

API

The API for react-final-form-file-field consists of 2 components (FileItem and FilesField and 1 hook (useFilesField).

FileItem

A component to represent a file. It selects the appropriate font-awesome icon based on the mime-type, and provides adds two buttons to delete and download the file.

Props:

• fileName: (string) required.
• removeFile: (function) required. An event handler that is passed to the delete buttons onClick. It should remove the file from the field.
• downloadFile (string | function) optional. If downloadFile is a function, it will be called when the download file button is pressed. If downloadFile is a string, then the download button will be a link, and when clicked it will navigate to the value of downloadFile. If this prop is not supplied the download button will not be rendered.
• inProgress: (bool) optional. If true, a progress bar will be displayed underneath the file (designed to show upload progress). If inProgress is true, then the progress prop must also be supplied.
• progress : (number) optional. This should be a number between 0 and 100 representing the percentage to show on the progress bar.
• mimeType: (string) optional. FileItem will attempt to display the most appropriate icon based on this value. If absent it will display a 'standard' file icon.

All other props will be passed to the li element that makes up FileItem.