Блог

Я интегрирую react-hooks-form с reactstrap с помощью контроллера. Но вместо возврата объекта file он возвращает строку пути для входного значения типа файла.

 <Controller
    name="target_file"
    type="file"
    rules={{
        validate: {
            checkNeither: (v) =>
                validate_file(v) || "Please provide either MacAddresses Input or InputFile",
            checkEither: (v) =>
                validate_file2(v) ||
                "Can only provide either MacAddresses Input or InputFile. Cant provide both",
        },
    }}
    control={control}
    render={({ field: { ref, ...field } }) => (
        <CustomInput
            label={"Choose a MacAddress list csv file"}
            {...field}
            type="file"
            innerRef={ref}
        />
    )}
/>
 

Что я получаю filepath вместо объекта Files

Как я могу получить объект File

Я пытался

 <Controller
    name="target_file"
    type="file"
    rules={{
        validate: {
            checkNeither: (v) =>
                validate_file(v) || "Please provide either MacAddresses Input or InputFile",
            checkEither: (v) =>
                validate_file2(v) ||
                "Can only provide either MacAddresses Input or InputFile. Cant provide both",
        },
    }}
    control={control}
    render={({ field: { ref, ...field } }) => (
        <CustomInput
            label={"Choose a MacAddress list csv file"}
            {...field}
            type="file"
            innerRef={ref}
            onChange={e => {
              field.onChange(e.target.files);
            }}
        />
    )}
/>
 

Но это выдает ошибку

 Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.
 

https://codesandbox.io/s/affectionate-moon-dmn8q