[SOLVED] react-hook-form – how to handle files array form


This Content is from Stack Overflow. Question asked by Itay Tur

im working with react and react-hook-form, to create a form.

in the form, there is files array.

I added useFieldArray to handle the files.

I use replace to add the files to the form-state.

The issue: form.fields contain only sub-object of the files uploaded
. but if I do const files = form.watch('files'), files contain the whole file object.

What i need to do in order to see the full object in form.fields and not only on the return value of form.watch('files')


      size: 100,
      name: 'file-name'
      path: 'some-path',
      type: 'some-type'


     id: 'some-id',
     path: 'some-path' 


  const form = useForm<UploadFormValues>({
    defaultValues: {
             files: [],
             tradingPartyId: '',
    resolver: yupResolver(VALIDATION_SCHEMA),
  const { fields, replace } = useFieldArray({
    control: form.control,
    name: 'files',

  const files = form.watch('files');
  console.log(fields); // [{ id: 'id', path: 'path'}]
  console.log(files); // [{ path: 'path', size: 100, name: 'name'}]

<input type='file' onChange={replace} />


code-sendbox Solution


change the form state property files structure


type UploadFormValues = {
  files: { name: string; size: number; type?: UploadObjectType }[];
  tradingPartyId: string;

to (add file: File):

type UploadFormValues = {
  files: { file: File; name: string; size: number; type?: UploadObjectType }[];
  tradingPartyId: string;


onDrop: (files) =>
        files.map((file) => ({ file, name: file.name, size: file.size })),

This Question was asked in StackOverflow by Itay Tur and Answered by Itay Tur It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?