How To Use Dropzone With Form

import { DropzoneForm } from '@/demos/DropzoneForm.demo'; import { Layout } from '@/layout';

export const meta = { title: 'How to use Dropzone with @mantine/form?', description: 'Learn how to use Dropzone with @mantine/form to handle file selection state', slug: 'how-to-use-dropzone-with-form', category: 'forms', tags: ['form', '@mantine/form', 'dropzone'], created_at: 'December 1, 2023', last_updated_at: 'April 8, 2024', };

export default Layout(meta);

@mantine/dropzone package provides a Dropzone component which allows you to drag and drop files from your computer or select them using the file picker. Its purpose is to handle file selection; it does not store files state, does not display selected files, and does not upload them to the server.

use-form hook handles form state, validation, error messages, and form submission. You can integrate any input or React component with the use-form hook using the following form object properties:

• form.getValues().x – value of the input
• form.errors.x – error message for the input
• form.setFieldValue('x', value) – function to set input value
• form.setFieldError('x', 'error-message') – function to set input error message

Using these properties, you can integrate Dropzone with the use-form hook:

<Demo data={DropzoneForm} />