Как создать тип для типа файла `Record <string, File>` в zod
Я использую ввод
type="file"
и вместо сохранения данных в
FileData
Я использую простой объект и создал для него тип:
Record<string, File>
. Он работает хорошо, но когда я пытаюсь создать валидатор с
zod
- Не понимаю, как создать для него однотипный.
Использование:
import { object as zodObject, string, number } from 'zod';
import { useValidators } from '../some';
const useValidation = () => {
const { createResolver } = useValidators();
return {
resolver: createResolver(
zodObject({
name: string(),
price: number(),
files: ???,
})
),
};
};
Документ довольно велик, но я не смог найти ни одного примера для своего случая: https://github.com/colinhacks/zod
Использование ввода:
const App = () => {
const [files, setFiles] = useState<Record<string, File>>({});
return (
<input
type="file"
onChange={event => {
const files = event.target.files;
const newFiles: Record<string, File> = {};
const keys = Object.keys(files);
for(let i = 0; i < keys.length; i++) {
const file = newFiles[key];
newFiles[file.name] = file;
}
setFiles(newFiles);
}}
/>
)
}
4 ответа
Может быть
z.instanceof
может решить?
Если вы хотите проверить тип файла...
z.instanceof (File)
Или, для типа FileList...
z.instanceof (FileList)
попробуй это:
z.object({
file: z
.any()
.refine((files) => files?.length == 1, "File is required.")
})
а затем используйте другие свойства файла для уточнения, чтобы отфильтровать его по своему усмотрению:
- файлы?.[0]?.размер
- файлы?.[0]?.тип
Мой коллега нашел решение:
// useValidation file
import { object as zodObject, string, number, record, any } from 'zod';
import { useValidators } from '../some';
const useValidation = () => {
const { createResolver } = useValidators();
return {
resolver: createResolver(
zodObject({
name: string(),
price: number(),
files: record(any()).nullable(),
})
),
};
};
И в файле, который использует объект с данными файла, мы используем его таким образом:
// fileInput on `onRemove` action return `fileName: string` and my file object looks like this: { fileName: File }
const [files, setFiles] = useState<Record<string, File> | null>(null);
<FileInput
onChange={(fileName) => {
const updatedFiles = { ...files as Record<string, File> };
delete updatedFiles[fileName];
setFiles(updatedFiles);
}}
/>
zodСхема:
file:
typeof window === "undefined"
? z.string()
: record(any()).nullable(),
начальные значения:
file: "undefined",