Integration with react-dropzone

[eckertalex]

I need help integrating react-hook-form with react-dropzone. Here is my best try so far

import React from 'react'
import {useForm} from 'react-hook-form'
import {DevTool} from '@hookform/devtools'
import {useDropzone} from 'react-dropzone'

export default function Form() {
  const {handleSubmit, register, control} = useForm()
  const {getRootProps, getInputProps} = useDropzone()

  function onSubmit(data) {
    console.log(data)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div {...getRootProps()}>
        <input
          ref={register({required: true})}
          {...getInputProps({name: 'base64'})}
        />
        <p>- Drag 'n' Drop file here -</p>
      </div>
      <DevTool control={control} />
    </form>
  )
}

Thank you for any suggestions and great job with this library 😁

[bluebill1049]

try with Controller with render prop, all you need is to wire up the onChange and value of the component.

[tjdam]

Is this working with drag and drop for you?
I only recently realized it works for click and search, but not drag and drop...

Is onChange supposed to be triggered when you drop a file? I don't to seem to get it to work....

[arellanojv]

No. I tried this one works for both drag n drop & click and search but it only accepts a single file.
https://stackoverflow.com/a/65809399/4184396

[doronhorwitz]

Here's a relatively strict (and Prettier-ered) TypeScript version of @taschetto's solution above:

(be aware that this, just as @taschetto's solution, needs to be used within a <FormProvider> due to the use of useFormContext).

import { Controller, useFormContext } from "react-hook-form";
import { useDropzone } from "react-dropzone";
import { ChangeEventHandler, FC } from "react";

export const DropzoneField: FC<{ name: string; multiple?: boolean }> = ({
    name,
    multiple,
    ...rest
}) => {
    const { control } = useFormContext();

    return (
        <Controller
            render={({ field: { onChange } }) => (
                <Dropzone
                    multiple={multiple}
                    onChange={(e) =>
                        onChange(
                            multiple
                                ? e.target.files
                                : e.target.files?.[0] ?? null
                        )
                    }
                    {...rest}
                />
            )}
            name={name}
            control={control}
            defaultValue=""
        />
    );
};

const Dropzone: FC<{
    multiple?: boolean;
    onChange?: ChangeEventHandler<HTMLInputElement>;
}> = ({ multiple, onChange, ...rest }) => {
    const { getRootProps, getInputProps } = useDropzone({
        multiple,
        ...rest,
    });

    return (
        <div {...getRootProps()}>
            <input {...getInputProps({ onChange })} />
        </div>
    );
};

The relevant versions of packages I used (from my package.json):

 {
    "@types/react": "^18.0.26",
    "react": "^18.2.0",
    "react-dropzone": "^14.2.3",
    "react-hook-form": "^7.41.5",
 }

[exipnus]

Here's a relatively strict (and Prettier-ered) TypeScript version of @taschetto's solution above:

(be aware that this, just as @taschetto's solution, needs to be used within a <FormProvider> due to the use of useFormContext).

import { Controller, useFormContext } from "react-hook-form";
import { useDropzone } from "react-dropzone";
import { ChangeEventHandler, FC } from "react";

export const DropzoneField: FC<{ name: string; multiple?: boolean }> = ({
    name,
    multiple,
    ...rest
}) => {
    const { control } = useFormContext();

    return (
        <Controller
            render={({ field: { onChange } }) => (
                <Dropzone
                    multiple={multiple}
                    onChange={(e) =>
                        onChange(
                            multiple
                                ? e.target.files
                                : e.target.files?.[0] ?? null
                        )
                    }
                    {...rest}
                />
            )}
            name={name}
            control={control}
            defaultValue=""
        />
    );
};

const Dropzone: FC<{
    multiple?: boolean;
    onChange?: ChangeEventHandler<HTMLInputElement>;
}> = ({ multiple, onChange, ...rest }) => {
    const { getRootProps, getInputProps } = useDropzone({
        multiple,
        ...rest,
    });

    return (
        <div {...getRootProps()}>
            <input {...getInputProps({ onChange })} />
        </div>
    );
};

The relevant versions of packages I used (from my package.json):

 {
    "@types/react": "^18.0.26",
    "react": "^18.2.0",
    "react-dropzone": "^14.2.3",
    "react-hook-form": "^7.41.5",
 }

Hello,

What is ...rest ?

Thank you

[doronhorwitz]

Hello,

What is ...rest ?

Thank you

@exipnus, I'm not sure if you're asking how ...rest works or if you're saying that I forgot to type it.
If the former, then I suggest you go read about "Spread Syntax" and then you'll understand that using the custom Dropzone component above will allow you to pass down other props to react-dropzone's useDropzone().
If the latter, then the typing I would use for ...rest should be (I won't put all the code here again, just the types):

export const DropzoneField: FC<{ name: string; multiple?: boolean; [x:string]: unknown;}> = ({
    name,
    multiple,
    ...rest
}) => {
    // ...
};

and

const Dropzone: FC<{
    multiple?: boolean;
    onChange?: ChangeEventHandler<HTMLInputElement>;
    [x:string]: unknown;
}> = ({ multiple, onChange, ...rest }) => {
    // ...
};

[arellanojv]

Hi Bill,

I tried the solution on this discussion but this only works with the click and search option.
#2146 (reply in thread)

[Tan-Aki]

@nikkipantony You are a lifesaver.

As for those who wonder how to be able to add multiples files, one after the other (and not replacing the uploaded files each time).

Replace the onDrop function with :

    const onDrop = useCallback(
        (droppedFiles) => {
            const newFiles = (!!files?.length && [...files].concat(droppedFiles)) || droppedFiles;
            setValue(name, newFiles, { shouldValidate: true });
        },
        [setValue, name, files],
    );

[nemanjam]

I got it working properly including with both drop and click to add a file using the following code:

FileInput.js

import React, { useCallback, useEffect } from "react"
import { useDropzone } from "react-dropzone"
import { useFormContext } from "react-hook-form"

const FileInput = props => {
    const { name, label = name } = props
    const { register, unregister, setValue, watch } = useFormContext()
    const files = watch(name)
    const onDrop = useCallback(
        droppedFiles => {
            setValue(name, droppedFiles, { shouldValidate: true })
        },
        [setValue, name]
    )
    const { getRootProps, getInputProps, isDragActive } = useDropzone({
        onDrop,
        accept: props.accept,
    })
    useEffect(() => {
        register(name)
        return () => {
            unregister(name)
        }
    }, [register, unregister, name])
    return (
        <>
            <label className=" " htmlFor={name}>
                {label}
            </label>
            <div
                {...getRootProps()}
                type="file"
                role="button"
                aria-label="File Upload"
                id={name}
            >
                <input {...props} {...getInputProps()} />
                <div
                    style={{ width: "500px", border: "black solid 2px" }}
                    className={" " + (isDragActive ? " " : " ")}
                >
                    <p className=" ">Drop the files here ...</p>

                    {!!files?.length && (
                        <div className=" ">
                            {files.map(file => {
                                return (
                                    <div key={file.name}>
                                        <img
                                            src={URL.createObjectURL(file)}
                                            alt={file.name}
                                            style={{
                                                height: "200px",
                                            }}
                                        />
                                    </div>
                                )
                            })}
                        </div>
                    )}
                </div>
            </div>
        </>
    )
}

export default FileInput

Form.js

import React from "react"
import { FormProvider, useForm } from "react-hook-form"
import FileInput from "./FileInput"

const Form = () => {
    const methods = useForm({
        mode: "onBlur",
    })
    const onSubmit = methods.handleSubmit(values => {
        console.log("values", values)
    })

    return (
        <FormProvider {...methods}>
            <form onSubmit={onSubmit}>
                <div className="">
                    <FileInput
                        accept="image/png, image/jpg, image/jpeg, image/gif"
                        name="file alt text"
                        label="File Upload"
                    />
                </div>
            </form>
        </FormProvider>
    )
}

export default Form

This stopped to work with React 18, I am struggling with it now. It worked perfectly with React 17.

[Moshyfawn]

RHF V7 does not officially support React 18. You can try to install the next major V8 alpha version and see if it fixes the issue.

Also, consider the fact that the bottleneck can also be the react-dropzone package. I saw quite a few React 18 related issue there.

React 18 just came out, so give the library maintainers some time to adjust to this breaking major React update. It's gonna a while before libraries can work with React 18 bug-free

[nemanjam]

I didnt know that. What about this?

And for React Query v4 I need React 18. What a mess???

Edit: I tried 8.0.0-alpha.2, it doesn't work, breaks same way, image file is lost from form state on subsequent renders.

  useEffect(() => {
    register(name);

    return () => {
      unregister(name); // this line breaks image files to load in form state.
    };
  }, [register, unregister, name]);

[nemanjam]

Actually it load files but doesn't keep formState properly, dirty is lost for example.

[michaeloliverx]

Here is TypeScript example using the <Controller> component:

import { useForm, SubmitHandler, Controller } from 'react-hook-form';
import Dropzone from 'react-dropzone';

type FormInputs = {
  file: FileList;
};

export default function App() {
  const form = useForm<FormInputs>();

  const onSubmit: SubmitHandler<FormInputs> = (data) => {
    console.log(data);
  };

  return (
    <div>
      <form onSubmit={form.handleSubmit(onSubmit)}>
        <Controller
          control={form.control}
          name="file"
          rules={{
            required: { value: true, message: 'This field is required' },
          }}
          render={({ field: { onChange, onBlur }, fieldState }) => (
            <Dropzone
              noClick
              onDrop={(acceptedFiles) => {
                form.setValue('file', acceptedFiles as unknown as FileList, {
                  shouldValidate: true,
                });
              }}
            >
              {({
                getRootProps,
                getInputProps,
                open,
                isDragActive,
                acceptedFiles,
              }) => (
                <div>
                  <div
                    style={{
                      borderStyle: 'dashed',
                      backgroundColor: isDragActive ? `#808080` : 'transparent',
                    }}
                    {...getRootProps()}
                  >
                    <input
                      {...getInputProps({
                        id: 'spreadsheet',
                        onChange,
                        onBlur,
                      })}
                    />

                    <p>
                      <button type="button" onClick={open}>
                        Choose a file
                      </button>{' '}
                      or drag and drop
                    </p>

                    {acceptedFiles.length
                      ? acceptedFiles[0].name
                      : 'No file selected.'}

                    <div>
                      {fieldState.error && (
                        <span role="alert">{fieldState.error.message}</span>
                      )}
                    </div>
                  </div>
                </div>
              )}
            </Dropzone>
          )}
        />

        <button>Submit</button>
      </form>
    </div>
  );
}

[AhsanTariq97]

How do you make it accept only specific file types?

[noxify]

@AhsanTariq97 - Just add accept to the Dropzone element.

<Dropzone 
   noClick
  accept={{"text/csv":[]}}
  onDrop={(acceptedFiles) => {
    form.setValue('file', acceptedFiles as unknown as FileList, {
      shouldValidate: true,
    });
  }}
>
...

Docs: https://react-dropzone.js.org/#src

[AhsanTariq97]

I found a workaround for it in the meanwhile, but this is the right way to do it. Thanks

[Crayon-ShinChan]

If you use onDrop, then you don't need Controller, see this example

[jgustavoj]

Anyone have this example with appended files?

[lamhungypl]

I notice that these working samples are relied on onDrop props.
ReactDropzone doesn't expose files values on their input's ref, onChange, isn't it?

[jackhkmatthewsBB]

I was experiencing some related unexpected behaviour.

The onChange handler is not called for inputs wrapped with getRootProps().

Instead pass an onDrop callback to useDropzone.

This works:

function Form() {
  const { register, handleSubmit, setValue } = useForm({});

  const dropzone = useDropzone({
    onDrop: ([file]) => file && setValue("file", file),
  });

  return (
    <form onSubmit={handleSubmit(console.log)}>
      <div {...dropzone.getRootProps()}>
        Drop here
        <input
          {...dropzone.getInputProps({
            ...register("file"),
          })}
        />
      </div>
      <button type="submit">Upload</button>
    </form>
  );
};

This doesn't:

function Form() {
  const { register, control, handleSubmit, setValue } = useForm({});

  const dropzone = useDropzone();

  return (
    <form onSubmit={handleSubmit(console.log)}>
      <Controller
        control={control}
        name="file"
        render={({ field: { onBlur } }) => {
          return (
            <div {...dropzone.getRootProps()}>
              Drop here
              <input
                {...dropzone.getInputProps({
                  onChange: (e) => setValue(e.target.files),
                  onBlur,
                })}
              />
            </div>
          );
        }}
      />
      <button type="submit">Upload</button>
    </form>
  );
}

[lagroms]

I have the same problem, I had to change my code with your exemple using "register". Is that some sort of bug that need to be opened? I upgraded recently from v12 to v14, and I didn't have this issue before.

[Crayon-ShinChan]

I found a really great solution that uses onDrop and doesn't require onChange or anything like that. Here is the code. I believe this should be chosen as the answer!

[Crayon-ShinChan]

Here is the core code, it even supports append files!😃

import React, { useCallback, useEffect } from "react";
import { useDropzone } from "react-dropzone";
import { useForm } from "react-hook-form";

const FileInput = (props) => {
  const { name, label = name, mode = "update" } = props;

  const { register, unregister, setValue, watch } = useForm();

  const files = watch(name);

  const onDrop = useCallback(
    (droppedFiles) => {
      let newFiles =
        mode === "update" ? droppedFiles : [...(files || []), ...droppedFiles];
      if (mode === "append") {
        newFiles = newFiles.reduce((prev, file) => {
          const fo = Object.entries(file);
          if (
            prev.find((e) => {
              const eo = Object.entries(e);
              return eo.every(
                ([key, value], index) =>
                  key === fo[index][0] && value === fo[index][1]
              );
            })
          ) {
            return prev;
          } else {
            return [...prev, file];
          }
        }, []);
      }
      setValue(name, newFiles, { shouldValidate: true });
    },
    [setValue, name, mode, files]
  );

  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    accept: props.accept
  });

  useEffect(() => {
    register(name);
    return () => {
      unregister(name);
    };
  }, [register, unregister, name]);

  return (
    <div style={{ padding: "100px" }}>
      <label
        className="block text-gray-700 text-sm font-bold mb-2 capitalize"
        htmlFor={name}
      >
        {label}
      </label>

      <div {...getRootProps()}>
        <input
          {...props}
          className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
          id={name}
          {...getInputProps()}
        />

        <div
          className={
            "w-full p-2 border border-dashed border-gray-900 " +
            (isDragActive ? "bg-gray-400" : "bg-gray-200")
          }
        >
          <p className="text-center my-2">Drop the files here ...</p>
          {!!files?.length && (
            <div className="grid gap-1 grid-cols-4 mt-2">
              {files.map((file) => {
                return (
                  <div key={file.name}>
                    <img
                      src={URL.createObjectURL(file)}
                      alt={file.name}
                      style={{ width: "100px", height: "100px" }}
                    />
                  </div>
                );
              })}
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default FileInput;

[epsilon11101]

With Mui and React Hook Form, this can work, adapt it only to your needs, I omitted some code that I can't publish, I hope it helps someone.

import {
  Controller,
  FieldValues,
  FieldPath,
  UseFormReturn,
  RegisterOptions,
  FieldErrors,
  FieldName,
} from 'react-hook-form'

import {
  ErrorMessage,
  FieldValuesFromFieldErrors,
} from '@hookform/error-message'



import {
  Box,
  Button,
  Card,
  CardContent,
  Grid,
  LinearProgress,
  ListItem,
  ListItemIcon,
  ListItemText,
  Stack,
  Typography,
  useTheme,
} from '@mui/material'
import Dropzone, { DropzoneProps } from 'react-dropzone'
import FileUploadIcon from '@mui/icons-material/FileUpload'
import DescriptionIcon from '@mui/icons-material/Description'
import { useCallback, useState } from 'react'

interface Props<TFieldValues extends FieldValues>
  extends Omit<DropzoneProps, 'onDrop'> {
  name: FieldPath<TFieldValues>
  control: UseFormReturn<TFieldValues>['control']
  rules?: RegisterOptions
  onChange?: (value: string | null) => void
  errors: FieldErrors<TFieldValues>
}

const FormDrag = <TFieldValues extends FieldValues>({
  name,
  control,
  rules,
  onChange,
  errors,
  ...rest
}: Props<TFieldValues>) => {

  const theme = useTheme()
  const [file, setFile] = useState<File | null>(null)
  const [isUploading, setIsUploading] = useState(false)
  const [finished, setFinished] = useState(false)

  const onReset = () => {
    setIsUploading(false)
    setFinished(false)
    setFile(null)
  }

  const onDropHandler = useCallback(
    (acceptedFiles: File[], onControllerChange: (value: string) => void) => {
      const uploadFile = Array.isArray(acceptedFiles)
        ? acceptedFiles[0]
        : acceptedFiles
      if (uploadFile) {
        setFinished(false)
        setFile(uploadFile)
        setIsUploading(true)
        fetchSomething({....})
          .unwrap()
          .then(({ .......}) => {
            otherPrivateFetch({ ...... })
              .unwrap()
              .then(() => {
                onControllerChange("whateveryouneed")
                onChange && onChange("whateveryouneed")
                setIsUploading(false)
                setFinished(true)
              })
              .catch(() => onReset())
          })
          .catch(() => onReset())
      }
    },
    []
  )

  return (
    <Controller
      name={name}
      control={control}
      rules={rules}
      render={({ field: { onChange: onControllerChange, onBlur } }) => (
        <Grid item container>
          {!isUploading && file === null && (
            <Dropzone
              onDrop={(acceptedFiles) => {
                onDropHandler(acceptedFiles, onControllerChange)
              }}
              {...rest}
            >
              {({ getRootProps, getInputProps, open, isDragActive }) => {
                return (
                  <Card
                    variant="outlined"
                    component="div"
                    elevation={0}
                    sx={{
                      px: 4,
                      width: '294px',
                      height: '195px',
                      backgroundColor: theme.palette.gray.main,
                    }}
                    {...getRootProps()}
                  >
                    <CardContent>
                      <Box
                        component="input"
                        {...getInputProps({
                          onBlur,
                        })}
                      />
                      <Grid
                        item
                        container
                        direction="column"
                        justifyContent="center"
                        alignItems="strech"
                        rowGap={2}
                        wrap="nowrap"
                      >
                        <Grid item xs={12}>
                          <Stack
                            direction="column"
                            width="100%"
                            justifyContent="center"
                            alignItems="center"
                            gap={1}
                          >
                            <FileUploadIcon color="darkGrey" />
                            <Typography
                              variant="body1"
                              component="p"
                              textTransform={
                                !isDragActive ? 'capitalize' : 'uppercase'
                              }
                              textAlign="center"
                              color={theme.palette.darkGrey.main}
                            >
                              {!isDragActive
                                ? 'firstText'
                                : 'Dragtext'}
                            </Typography>
{.......morecomponents}
                          </Stack>
                        </Grid>
                        <Grid
                          item
                          container
                          justifyContent="center"
                          alignItems="strech"
                          xs={12}
                          sx={{
                            display: !isDragActive ? 'block' : 'none',
                          }}
                        >
                          <Button
                            fullWidth
                            type="button"
                            onClick={open}
                            variant="outlined"
                            sx={{
                              py: 1,
                              px: 2,
                              color: 'common.black',
                              border: `3px solid ${theme.palette.primary.main}`,
                              borderRadius: '15px',
                              '&:hover': {
                                borderWidth: '3px',
                                backgroundColor: theme.palette.primary.main,
                                color: theme.palette.primary.contrastText,
                              },
                            }}
                          >
                           {..........button_text}
                          </Button>
                        </Grid>
                      </Grid>
                    </CardContent>
                  </Card>
                )
              }}
            </Dropzone>
          )}
          {!!file && (
            <Grid
              item
              container
              xs={12}
              direction="row"
              justifyContent="flex-start"
              alignItems="center"
              sx={{ pl: 2 }}
            >
              <Grid item xs={12}>
                <ListItem disablePadding disableGutters>
                  <ListItemIcon sx={{ minWidth: 0, mr: 2 }}>
                    <DescriptionIcon />
                  </ListItemIcon>
                  <ListItemText
                    primary={file.name}
                    primaryTypographyProps={{
                      variant: 'subtitle1',
                      fontWeight: 600,
                    }}
                  />
                </ListItem>

                <LinearProgress
                  sx={{
                    marginTop: 0.5,
                    maxWidth: '294px',
                  }}
                  variant="determinate"
                  value={finished && !isUploading ? 100 : 0}
                />
              </Grid>
            </Grid>
          )}
          {errors && (
            <Grid item xs={12} sx={{ mt: 1 }}>
              <ErrorMessage
                errors={errors}
                name={
                  name as unknown as FieldName<
                    FieldValuesFromFieldErrors<FieldErrors<TFieldValues>>
                  >
                }
                render={({ message }) => {
                  return (
                    <Typography
                      variant="body2"
                      component="p"
                      color={theme.palette.error.main}
                    >
                      {message}
                    </Typography>
                  )
                }}
              />
            </Grid>
          )}
        </Grid>
      )}
    />
  )
}

export default FormDrag

in Client code you can use like this

    <FormDrag
       name="passwordKey"
       control={control}
       errors={errors}
       documentId={3}
       noClick
        noKeyboard
        maxFiles={1}/>