Form/Documents: reset InputFile components onClick cancel button

apps/web/components/Form/Documents/Buttons.tsx

@@ -12,7 +12,7 @@ const ERROR_UPLOAD_DOCUMENT = 'Произошла ошибка при загру
 
 export function Buttons() {
   const { resetValidation } = useFormStore();
-  const { formFiles, pageUrlParams, setFormState } = useContext(FormContext);
+  const { formFiles, pageUrlParams, setFormFiles, setFormState } = useContext(FormContext);
 
   const handleUploadFiles = useCallback(() => {
     setFormState({ status: 'pending' });
@@ -35,9 +35,15 @@ export function Buttons() {
     });
   }, [formFiles, pageUrlParams, resetValidation, setFormState]);
 
+  const handleCancel = () => {
+    setFormFiles([]);
+  };
+
   return (
-    <div className="grid grid-cols-1 gap-2 gap-x-4 md:grid-cols-2">
-      <div />
+    <div className="grid grid-cols-1 gap-2 gap-x-4 md:grid-cols-3">
+      <Button intent="outline-danger" onClick={handleCancel}>
+        Отмена
+      </Button>
       <Button onClick={handleUploadFiles}>Загрузить файлы</Button>
     </div>
   );

apps/web/components/Form/Documents/Files.tsx

@@ -3,7 +3,7 @@ import type { FormComponentProps } from '../types';
 import { ArrowDownTrayIcon } from '@heroicons/react/24/solid';
 import { Heading, InputFile } from '@repo/ui';
 import Link from 'next/link';
-import { useContext } from 'react';
+import { useContext, useEffect, useRef } from 'react';
 
 type DownloadDocumentProps = Pick<FileProps, 'document'>;
 
@@ -45,10 +45,17 @@ function File({ document }: FileProps) {
     }
   };
 
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    const uploadableFile = formFiles.some((x) => x.documentTypeId === document.documentTypeId);
+    if (!uploadableFile && inputRef.current) inputRef.current.value = '';
+  }, [document.documentTypeId, formFiles]);
+
   return (
     <div key={documentTypeId} className="flex flex-col gap-1">
       <label className="mb-2 block text-sm font-normal text-gray-900">{name}:</label>
-      <InputFile onChange={handleFileChange} disabled={!canUpload} />
+      <InputFile ref={inputRef} onChange={handleFileChange} disabled={!canUpload} />
       <DownloadDocument document={document} />
     </div>
   );