FileInput

Basic Usage


import { FileInput } from '@krakentech/coral';
 
<FileInput />

Click or drag files to this area to upload

Only .jpg, .png, .doc and .pdf files will be accepted.

Properties

accept

Warning Consumers should still run server-side validation on files to ensure that the correct file formats have been uploaded.


<FileInput accept="image/png" />

Click or drag files to this area to upload

Only .jpg, .png, .doc and .pdf files will be accepted.

automaticUpload / automaticUploadAction


const automaticUploadAction = async (files) => {}
 
<FileInput automaticUpload automaticUploadAction={automaticUploadAction} />

buttonLabel


<FileInput buttonLabel="Custom button label" />

Click or drag files to this area to upload

Only .jpg, .png, .doc and .pdf files will be accepted.

buttonPosition


<FileInput buttonPosition="right" />

Click or drag files to this area to upload

Only .jpg, .png, .doc and .pdf files will be accepted.

disabled


<FileInput disabled />

Click or drag files to this area to upload

Only .jpg, .png, .doc and .pdf files will be accepted.

dropzoneTitle


<FileInput dropzoneTitle="Drop files here" />

Drop files here

Only .jpg, .png, .doc and .pdf files will be accepted.

dropzoneCaption


<FileInput dropzoneCaption="A bit of extra text about file limits or file types accepted" />

Click or drag files to this area to upload

A bit of extra text about file limits or file types accepted

error / errorMessage


<FileInput error errorMessage="Something went wrong" />

Click or drag files to this area to upload

Only .jpg, .png, .doc and .pdf files will be accepted.

Something went wrong

maxFiles / multiple


<FileInput multiple maxFiles="5" />

Click or drag files to this area to upload

Only .jpg, .png, .doc and .pdf files will be accepted.

name

Note: if you’re using multiple your name should be appended with [] to enable multiple files to be passed through the form data.


<FileInput name="inputName" />

Click or drag files to this area to upload

Only .jpg, .png, .doc and .pdf files will be accepted.

uploadingLabel


<FileInput uploadingLabel="Custom uploading message..." />

Async automatic upload


const asyncOnChangeUpload = async (files: FileList | null) => {
    const fileStatus: FileInputUploadStatus[] = [];
 
    if (files?.length) {
        for (let i = 0; i < files.length; i++) {
            const response: FileInputUploadStatus = {
                name: files[i].name,
                status: 'uploading',
            };
 
            const data = new FormData();
            data.append('file', files[i]);
 
            try {
                await fetch('{endpoint}', {
                    method: 'POST',
                    body: data,
                })
                    .then((res) => res.json())
                    .then((res) => {
                        /**
                         * The response from your endpoint could be structured like:
                         * 200 (successful upload): { "uploaded": true }
                         * 200 (failed upload): { "uploaded": false, "message": "Too big" }
                         */
                        const success = res.uploaded;
 
                        if (!success) {
                            response.status = 'error';
                            response.message = res.message;
                        } else {
                            response.status = 'success';
                        }
                    });
            } catch (error) {
                response.status = 'error';
                response.message = 'Something went wrong';
            }
 
            fileStatus.push(response);
        }
        return fileStatus;
    }
    return [];
};
 
<FileInput
    automaticUpload
    automaticUploadAction={asyncOnChangeUpload}
    multiple
    maxFiles={20}
/>;

Event Handlers

Files in onChange is a complete list of all files that have been uploaded, regardless of whether they are pending or not. If you upload one file then another after, unlike automaticUploadAction, you will receive both items in files, not just the last one.

onRemove provides only the file that you have removed in the callback.


<FileInput 
    onChange={(files) => console.log(files)} 
    onRemove={(file) => console.log(file)}
/>

Full API

Name	Type	Default
`accept`	`string` What filetypes can be uploaded. Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept	`image/png,image/jpg,image/jpeg,.doc,.pdf`
`automaticUpload`	`boolean` If `true`, the input will automatically upload files when selected. If you set this to `true`, you must also provide an `automaticUploadAction` function.	`false`
`automaticUploadAction`	`(pendingFiles: FileList \| null) => Promise<FileInputUploadStatus[]>` A function that returns a promise containing an array of FileInputUploadStatus objects for the upload status of each file to render.
`buttonLabel`	`string` The label for the button.	`Choose files(s)`
`buttonPosition`	`"left" \| "center" \| "right"` Position of the button.	`left`
`disabled`	`boolean` If `true`, the component will be disabled and not respond to user interactions.	`false`
`dropzoneTitle`	`string` Title of the dropzone element.	`Click or drag files to this area to upload`
`dropzoneCaption`	`string` Caption of the dropzone element.	`Only .jpg, .png, .doc and .pdf files will be accepted.`
`error`	`boolean` If `true`, the component will have error styling set.	`false`
`errorMessage`	`string` If set, the `ErrorMessage` component will be rendered below the input with this text.	`Invalid input`
`id`	`string` The id for the input.	`file-input`
`maxFiles`	`number` The maximum number of files allowed to be uploaded.	`1`
`multiple`	`boolean` If `true`, the input will allow multiple files to be selected.	`false`
`name`	`string` The field name used on the POST request when the form is submitted.
`onChange`	`(files: FileList \| null) => void` Callback fired whenever the input element loses user focus. `files` The files that are currently selected in the input.
`onRemove`	`(file: File \| null) => void` Callback fired when a file is removed from the input. `file` The file that was removed, or `null` if no file was removed.
`uploadingLabel`	`string` The text to display while files are being uploaded.	`Uploading...`
`attributes`	`Attributes` This prop can be used to pass HTML attributes directly to the component. We currently allow passing `data-` and `aria-` attributes and the `id`. However, you can pass anything else with a type hack if necessary since this object is despread in to the component, without filtering its content. Example usage: `AttributesProps: { 'id': 'close-button', 'aria-label': 'Close button', 'data-testid': 'close-button' };`