FileField

The <FileField> component allows users to upload files to your application. It provides both a drag and drop area and a traditional file browser button, making it easy for users to select files in the way that works best for them.

File uploads are commonly used in forms where users need to attach documents, images, or other files such as resumes for job applications, profile pictures for accounts, or supporting materials for requests.

Anatomy

A <FileField> consists of a label, a drop zone where users can drag files, a zone label providing instructions, and an upload button for browsing files. Once files are selected, they appear as file items in a list, each showing the file name, size, and a remove button.

• Label: Identifies what the file upload field is for.
• Drop zone: The area where users can drag and drop files.
• Zone label: Instructional text guiding users to drag files.
• Upload button: Triggers the native file browser for selecting files.
• File item: Displays information about an uploaded file.
• Remove button: Allows users to remove a file from the list.

Appearance

The appearance of a component can be customized using the variant and size props. These props adjust the visual style and dimensions of the component, available values are based on the active theme.

Usage

The <FileField> is useful whenever users need to attach files to a form or upload content to your application. It supports both drag and drop interaction and traditional file browsing, providing flexibility for different user preferences and device capabilities.

When users need to attach a single file, such as a profile picture or a document, use the basic <FileField>. Users can either drag a file into the drop zone or click the upload button to browse their files.

import { FileField } from '@marigold/components';export default () => <FileField label="Upload document" />;

Uploading multiple files

When users need to upload several files at once, such as multiple photos for a gallery or supporting documents for an application, set the multiple prop to allow selecting and uploading multiple files.

This allows users to select multiple files in the file browser or drag several files into the drop zone at once.

import { FileField } from '@marigold/components';export default () => <FileField label="Upload photos" multiple />;

Restricting file types

For specific use cases where only certain file types are appropriate, such as accepting only PDFs for document uploads or only images for profile pictures, use the accept prop to specify allowed file types. This helps prevent errors and guides users toward selecting appropriate files.

import { FileField, Stack } from '@marigold/components';export default () => (  <Stack space={4}>    <FileField      label="Upload PDF document"      accept={['application/pdf', '.pdf']}    />    <FileField label="Upload image" accept={['image/*']} />  </Stack>);

The accept prop accepts an array of MIME types (like 'application/pdf' or 'image/*') or file extensions (like '.pdf' or '.jpg'). Users will only be able to select files that match these criteria, and dropped files that don't match will be filtered out automatically.

Props

FileField

FileField.Item

Related