@redneckz/wildless-cms-uni-blocks 0.14.989 → 0.14.991

package/mobile/src/ui-kit/FormField/getField.tsx

@@ -1,114 +1,10 @@
 import { type FormFieldRegisterer } from '../../hooks/useForm/useForm';
-import { type FormTypeFieldDef } from '../../model/FormTypeFieldDef';
 import { type VNode } from '../../model/VNode';
 import { type BaseFieldDef } from './BaseFieldDef';
-import { type CustomFieldProps } from './CustomFieldProps';
-import { AcquiringField } from './Fields/AcquiringField';
-import { AddressBranchField } from './Fields/AddressBranchField';
-import { AmountField } from './Fields/AmountField';
-import { AnnualRevenueField } from './Fields/AnnualRevenueField';
-import { ApplicationDateField } from './Fields/ApplicationDateField';
-import { ApplierTypeField } from './Fields/ApplierTypeField';
-import { BankEmpoleeField } from './Fields/BankEmpoleeField';
-import { BirthdayField } from './Fields/BirthdayField';
-import { CallbackTimeField } from './Fields/CallbackTimeField';
-import { CollectionCountField } from './Fields/CollectionCountField';
-import { CommentField } from './Fields/CommentField';
-import { DadataPartySelectField } from './Fields/DadataPartySelectField';
-import { DesiredMeetingDateField } from './Fields/DesiredMeetingDateField';
-import { EmailField } from './Fields/EmailField';
-import { FeedbackMethodField } from './Fields/FeedbackMethodField';
-import { FullNameField } from './Fields/FullNameField';
-import { FullRegionField } from './Fields/FullRegionField';
-import { InnField } from './Fields/InnField';
-import { IsClientField } from './Fields/IsClientField';
-import { LocalitiesField } from './Fields/LocalitiesField';
-import { MiddleNameField } from './Fields/MiddleNameField';
-import { NameField } from './Fields/NameField';
-import { OnlineCheckoutField } from './Fields/OnlineCheckoutField';
-import { PartnerCommentsField } from './Fields/PartnerCommentsField';
-import { PartnerNameField } from './Fields/PartnerNameField';
-import { PartnerSymbolCodeField } from './Fields/PartnerSymbolCodeField';
-import { PhoneField } from './Fields/PhoneField';
-import { PosTerminalField } from './Fields/PosTerminalField';
-import { ProductField } from './Fields/ProductField';
-import { QuestionProductField } from './Fields/QuestionProductField';
-import { RegionField } from './Fields/RegionField';
-import { RepresentativeNameField } from './Fields/RepresentativeNameField';
-import { SecondaryPhoneField } from './Fields/SecondaryPhoneField';
-import { ServiceDirectionField } from './Fields/ServiceDirectionField';
-import { SituationDescriptionField } from './Fields/SituationDescriptionField';
-import { SufferedFromField } from './Fields/SufferedFromField';
-import { SurnameField } from './Fields/SurnameField';
-import { TermField } from './Fields/TermField';
-import { UltraPremiumField } from './Fields/UltraPremiumField';
-import { VedField } from './Fields/VedField';
-import { ConsentToReceiveMaterialsField } from './Fields/СonsentToReceiveMaterialsField';
-import { getPremium } from './getPremium';
+import { InputsMap } from './InputsMap';
 import { RefWrapper } from './RefWrapper';
 import { shouldRenderField } from './shouldRenderField';
 
-const PRODUCT_REF = {
-  $ref: '/wcms-resources/outservice-productlist.json',
-};
-
-const AGENTS_REF = {
-  $ref: '/wcms-resources/agenty-dlya-rko.json',
-};
-
-const InputsMap = {
-  fullName: FullNameField,
-  addressBranch: AddressBranchField,
-  desiredMeetingDate: DesiredMeetingDateField,
-  product: (props: CustomFieldProps) => <ProductField {...props} source={PRODUCT_REF} />,
-  localities: LocalitiesField,
-  isClient: IsClientField,
-  partnerComments: PartnerCommentsField,
-  collectionCount: CollectionCountField,
-  acquiringType: AcquiringField,
-  onlineCheckout: OnlineCheckoutField,
-  posTerminal: PosTerminalField,
-  serviceType: UltraPremiumField,
-  term: TermField,
-  amount: AmountField,
-  annualRevenue: AnnualRevenueField,
-  vedTypes: VedField,
-  feedbackMethod: FeedbackMethodField,
-  serviceDirection: ServiceDirectionField,
-  bankEmpolee: BankEmpoleeField,
-  secondaryPhone: SecondaryPhoneField,
-  applicationDate: ApplicationDateField,
-  region: (props: CustomFieldProps) =>
-    getPremium(props?.params?.typeForm as FormTypeFieldDef) ? (
-      <FullRegionField {...props} />
-    ) : (
-      <RegionField {...props} />
-    ),
-  consentToReceiveMaterials: ConsentToReceiveMaterialsField,
-  sufferedFrom: SufferedFromField,
-  situationDescription: SituationDescriptionField,
-  representativeName: RepresentativeNameField,
-  applierType: ApplierTypeField,
-  surname: SurnameField,
-  name: NameField,
-  middleName: MiddleNameField,
-  birthday: BirthdayField,
-  phone: PhoneField,
-  email: EmailField,
-  inn: InnField,
-  comment: CommentField,
-  fullRegion: FullRegionField,
-  partnerSymbolCode: (props: CustomFieldProps) => (
-    <PartnerSymbolCodeField {...props} source={AGENTS_REF} />
-  ),
-  partnerName: (props: CustomFieldProps) => <PartnerNameField {...props} source={AGENTS_REF} />,
-  dadataPartyNameSelect: DadataPartySelectField,
-  dadataPartyInnSelect: DadataPartySelectField,
-  questionProduct: QuestionProductField,
-  callbackTime: CallbackTimeField,
-  russianPhone: PhoneField,
-};
-
 export const getField =
   <F extends BaseFieldDef>(
     field: FormFieldRegisterer<any>,

package/mobile/src/ui-kit/FormField/getObjectValidator.tsx

@@ -3,6 +3,7 @@ import { type Validator } from '../../validation/validator';
 import { type BaseFieldDef } from './BaseFieldDef';
 import {
   agreementValidator,
+  birthdayValidator,
   defaultSelectValidator,
   defaultValidator,
   emailValidator,
@@ -34,7 +35,7 @@ export const validatorObj: Record<string, Validator> = {
   surname: nameValidator('Укажите свою фамилию на кириллице'),
   name: nameValidator('Укажите своё имя на кириллице (без сокращений)'),
   middleName: nameValidator('Укажите своё отчество на кириллице'),
-  birthday: defaultValidator('Укажите дату рождения'),
+  birthday: birthdayValidator('Укажите дату рождения'),
   phone: phoneValidator('Укажите номер телефона'),
   email: emailValidator('Укажите электронную почту'),
   inn: innValidator('Укажите ИНН'),
@@ -48,6 +49,20 @@ export const validatorObj: Record<string, Validator> = {
   callbackTime: defaultValidator(),
   questionProduct: defaultValidator(),
   russianPhone: russianPhoneValidator('Укажите номер телефона'),
+  cityOfResidence: defaultValidator(),
+  internshipStartDate: defaultValidator(),
+  internshipEndDate: defaultValidator(),
+  university: defaultValidator(),
+  fieldOfStudy: defaultValidator(),
+  courseYear: defaultValidator(),
+  graduationYear: defaultValidator(),
+  averageGrade: defaultValidator(),
+  skillsAndKnowledge: defaultValidator(),
+  educationLevel: defaultSelectValidator(),
+  motivationForInternship: defaultValidator(),
+  workExperience: defaultValidator(),
+  internshipDirection: defaultValidator(),
+  workingHours: defaultValidator(),
 };
 
 export const getFormValidator = <FormState extends Record<string, any>, F extends BaseFieldDef>(

package/mobile/src/ui-kit/FormField/validators.ts

@@ -1,4 +1,5 @@
 import { isCyrillic } from '../../utils/isCyrilic';
+import { isDateValid } from '../../utils/isDateValid';
 import { required } from '../../validation/required';
 import { validator } from '../../validation/validator';
 
@@ -51,3 +52,6 @@ export const emailValidator = (errorMsg: string) =>
 
 export const isValidInnLength = (value: string | undefined): boolean =>
   typeof value === 'string' && (value.length === 10 || value.length === 12);
+
+export const birthdayValidator = (errorMsg: string) =>
+  validator((_: Date) => isDateValid(_, { maxLimit: new Date() }))(errorMsg);

package/mobile/src/ui-kit/Input/Input.tsx

@@ -4,6 +4,7 @@ import { style } from '../../utils/style';
 import { getValidStyle } from './getValidStyle';
 import { type InputProps } from './InputProps';
 import { renderLabel } from './renderLabel';
+import { defaultStyle } from './styles';
 
 export const Input = JSX<InputProps>(
   // eslint-disable-next-line max-lines-per-function
@@ -88,5 +89,3 @@ export const Input = JSX<InputProps>(
     );
   },
 );
-
-const defaultStyle = 'w-full border rounded-md text-primary-text outline-none p-m';

package/mobile/src/ui-kit/Input/InputFile.tsx

@@ -0,0 +1,132 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useEffect, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { SUCCESS_STATUS, type ResponseData } from '../../api/sendFile';
+import { useDragAndDrop } from '../../hooks/useDragAndDrop';
+import { noop } from '../../utils/noop';
+import { style } from '../../utils/style';
+import { CloseButton } from '../DialogManager/CloseButton';
+import { ProgressBar } from '../ProgressBar/ProgressBar';
+import { getValidStyle } from './getValidStyle';
+import { type InputProps } from './InputProps';
+import { renderErrorText } from './renderErrorText';
+import { renderFileInput } from './renderFileInput';
+import { renderInfoText } from './renderInfoText';
+import { borderStyle, defaultStyle } from './styles';
+import { useVerifyFile } from './useVerifyFile';
+
+export const InputFile = JSX<InputProps>(
+  // eslint-disable-next-line max-lines-per-function
+  ({
+    key,
+    className,
+    id,
+    name,
+    type = 'file',
+    label,
+    valid = true,
+    pattern,
+    autoFocus = false,
+    extensions,
+    children,
+    onFocus,
+    onBlur,
+    maxSizeMB,
+    error,
+    onFileChanged = noop,
+  }) => {
+    const inputRef = useRef<HTMLInputElement | null>(null);
+    const [selectedFile, setSelectedFile] = useState<File | null>(null);
+    const [uploadError, setUploadError] = useState('');
+    const [uploadResponse, setUploadResponse] = useState<ResponseData | null>(null);
+
+    const { verifyFile, isFileUploading, progress } = useVerifyFile({
+      onUploadError: setUploadError,
+      onUploadResponse: setUploadResponse,
+      onFileSelected: setSelectedFile,
+      extensions,
+      maxSizeMB,
+    });
+
+    useEffect(() => {
+      if (autoFocus) {
+        inputRef.current?.focus();
+      }
+    }, [autoFocus, inputRef]);
+
+    const handleFileChange = async (file?: File) => {
+      handleResetFile();
+      if (file) {
+        await verifyFile({ file, onFileChanged });
+      }
+    };
+
+    const handleResetFile = () => {
+      setSelectedFile(null);
+      setUploadError('');
+      setUploadResponse(null);
+      onFileChanged('');
+    };
+
+    const { handleDrag, handleLeave, handleDrop, isDragActive } = useDragAndDrop({
+      onReset: handleResetFile,
+      onFileSelected: verifyFile,
+      uploadResponse,
+      onFileChanged,
+    });
+
+    const paddingStyle = children ? 'pr-3xl' : '';
+    const validStyle = getValidStyle(valid);
+    const activeDragStyle = isDragActive ? 'border-primary-hover' : '';
+
+    return (
+      <div
+        className={style('relative', className)}
+        onDragEnter={handleDrag}
+        onDragOver={handleDrag}
+        onDragLeave={handleLeave}
+        onDrop={handleDrop}
+      >
+        <label
+          className={style(
+            'h-14 cursor-pointer space-y-xs block',
+            defaultStyle,
+            paddingStyle,
+            borderStyle,
+            validStyle,
+            activeDragStyle,
+          )}
+        >
+          {isFileUploading ? (
+            <div>
+              <ProgressBar step={progress} isOnlyInteger={true} />
+            </div>
+          ) : (
+            renderFileInput({
+              label,
+              inputRef,
+              id,
+              key,
+              type,
+              name,
+              pattern,
+              disabled: Boolean(uploadResponse || isFileUploading),
+              onChange: handleFileChange,
+              onFocus,
+              onBlur,
+              extensions,
+              uploadResponse,
+              file: selectedFile,
+            })
+          )}
+        </label>
+        {uploadResponse?.status === SUCCESS_STATUS ? (
+          <CloseButton className="absolute top-0 right-0 z-10" onClose={handleResetFile} />
+        ) : null}
+
+        {renderInfoText(extensions, maxSizeMB)}
+        {renderErrorText(error || uploadError)}
+        {children}
+      </div>
+    );
+  },
+);

package/mobile/src/ui-kit/Input/InputFileControl.tsx

@@ -0,0 +1,22 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { getRequiredLabel } from '../../utils/getRequiredLabel';
+import { InputFile } from './InputFile';
+import { type InputProps } from './InputProps';
+
+export const InputFileControl = JSX<InputProps>(
+  ({ label, value = '', error, type, inputRef, required, ...rest }) => {
+    return (
+      <div ref={inputRef}>
+        <InputFile
+          type={type || 'file'}
+          aria-label={label}
+          label={getRequiredLabel({ label, required })}
+          valid={Boolean(!error)}
+          value={value}
+          error={error}
+          {...rest}
+        />
+      </div>
+    );
+  },
+);

package/mobile/src/ui-kit/Input/InputProps.ts

@@ -3,7 +3,16 @@ import { type DefaultControlType } from '../../model/DefaultControlType';
 import { type InputTypes } from '../../model/InputTypes';
 import { type PreventableEventWithTarget } from '../PreventableEvent';
 
-export interface InputProps<V = string> extends DefaultControlType, ControlProps<V> {
+export type FileInputProps = {
+  extensions?: string[];
+  maxSizeMB?: number;
+  onFileChanged?: (value: string) => void;
+};
+
+export interface InputProps<V = string>
+  extends DefaultControlType,
+    ControlProps<V>,
+    FileInputProps {
   id?: string;
   name?: string;
   type?: InputTypes;

package/mobile/src/ui-kit/Input/checks/checkFIleExtension.ts

@@ -0,0 +1,9 @@
+import { EXTENSIONS_ERROR_TEXT } from '../constants';
+
+export const checkFileExtension = async (file: File, extensions?: string[]): Promise<void> => {
+  const fileExt = file.name.split('.')[1];
+  console.log(fileExt, extensions);
+  if (!extensions?.includes(fileExt)) {
+    throw new Error(EXTENSIONS_ERROR_TEXT);
+  }
+};

package/mobile/src/ui-kit/Input/checks/checkFileMimeType.ts

@@ -0,0 +1,20 @@
+import { EXTENSIONS_ERROR_TEXT } from '../constants';
+
+const EXT_TO_MIME: Record<string, string> = {
+  pdf: 'application/pdf',
+  doc: 'application/msword',
+  docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+  pptx: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+};
+
+export const checkFileMimeType = async (file?: File, extensions?: string[]): Promise<void> => {
+  const fileMimeType = file?.type ?? '';
+
+  const expectedMimeTypes = (extensions || [])
+    .map((ext) => EXT_TO_MIME[ext])
+    .filter((mime) => mime !== undefined);
+
+  if (!expectedMimeTypes.includes(fileMimeType)) {
+    throw new Error(EXTENSIONS_ERROR_TEXT);
+  }
+};

package/mobile/src/ui-kit/Input/checks/checkFileSignature.ts

@@ -0,0 +1,30 @@
+import { EXTENSIONS_ERROR_TEXT } from '../constants';
+import { getFileSignature } from './getFileSignature';
+
+const SIGNATURES: Record<string, string> = {
+  pdf: '25 50 44 46 2d',
+  docx: '50 4b 03 04',
+  pptx: '50 4b 03 04',
+  xlsx: '50 4b 03 04',
+  doc: 'D0 CF 11 E0 A1 B1 1A E1',
+};
+
+export const checkFileSignature = async (
+  file?: File,
+  expectedTypes?: (keyof typeof SIGNATURES)[],
+): Promise<void> => {
+  const hexSignature = await getFileSignature(file);
+
+  const isValid = (expectedTypes ?? []).some((type) => {
+    const expectedSignature = SIGNATURES[type]?.toLowerCase();
+
+    console.log(expectedSignature);
+    console.log(hexSignature);
+
+    return expectedSignature && hexSignature.startsWith(expectedSignature);
+  });
+
+  if (!isValid) {
+    throw new Error(EXTENSIONS_ERROR_TEXT);
+  }
+};

package/mobile/src/ui-kit/Input/checks/checkFileSize.ts

@@ -0,0 +1,10 @@
+import { EMPTY_FILE_ERROR_TEXT, MAX_SIZE_ERROR_TEXT } from '../constants';
+
+export const checkFileSize = async (file: File, maxSizeMB?: number): Promise<void> => {
+  if (maxSizeMB && file.size > maxSizeMB * 1024 * 1024) {
+    throw new Error(MAX_SIZE_ERROR_TEXT);
+  }
+  if (file.size === 0) {
+    throw new Error(EMPTY_FILE_ERROR_TEXT);
+  }
+};

package/mobile/src/ui-kit/Input/checks/getFileSignature.ts

@@ -0,0 +1,16 @@
+export const getFileSignature = (file?: File): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const buffer = reader.result as ArrayBuffer;
+      const bytes = new Uint8Array(buffer);
+      const hex = Array.from(bytes)
+        .map((b) => b.toString(16).padStart(2, '0'))
+        .join(' ');
+      resolve(hex);
+    };
+    reader.onerror = reject;
+
+    return file && reader.readAsArrayBuffer(file.slice(0, 8));
+  });
+};

package/mobile/src/ui-kit/Input/constants.ts

@@ -0,0 +1,6 @@
+export const ACCEPTED_EXTENSIONS_TEXT = 'Поддерживаемые форматы файлов';
+export const MAX_SIZE_TEXT = 'Максимальный размер файла';
+export const EMPTY_FILE_ERROR_TEXT = 'Ошибка загрузки файла. Убедитесь, что файл не пустой';
+export const EXTENSIONS_ERROR_TEXT = 'Файл не соответствует допустимым расширениям';
+export const MAX_SIZE_ERROR_TEXT = 'Файл превышает допустимый размер';
+export const DEFAULT_ERROR_TEXT = 'Ошибка при загрузке файла. Попробуйте загрузить файл позднее';

package/mobile/src/ui-kit/Input/renderFileInput.tsx

@@ -0,0 +1,87 @@
+import { SUCCESS_STATUS, type ResponseData } from '../../api/sendFile';
+import type { IconName } from '../../icons/IconName';
+import type { IconVersion } from '../../model/IconVersion';
+import { noop } from '../../utils/noop';
+import { style } from '../../utils/style';
+import { Icon } from '../Icon/Icon';
+import type { PreventableEvent, PreventableEventWithTargetFiles } from '../PreventableEvent';
+import type { InputProps } from './InputProps';
+import { renderLabel } from './renderLabel';
+
+const ICON_PROPS: { name: IconName; iconVersion: IconVersion; width: string; height: string } = {
+  name: 'DocIcon',
+  iconVersion: 'black',
+  width: '24',
+  height: '24',
+};
+
+interface InputFileProps extends InputProps<File> {
+  key?: string;
+  uploadResponse?: ResponseData | null;
+  file?: File | null;
+  onReset?: (e: PreventableEvent) => void;
+  isCustomValid?: boolean;
+}
+
+export const renderFileInput = ({
+  label,
+  inputRef,
+  id,
+  key,
+  type,
+  name,
+  pattern,
+  disabled,
+  onChange = noop,
+  onFocus,
+  onBlur,
+  extensions,
+  uploadResponse,
+  file,
+}: InputFileProps) => {
+  const ariaLabel = label ?? name ?? id;
+
+  return (
+    <div>
+      {uploadResponse?.status === SUCCESS_STATUS ? (
+        renderFileName(file)
+      ) : (
+        <div className="flex items-center space-x-2">
+          <Icon className="inline-block" {...ICON_PROPS} />
+          {renderLabel(label)}
+          <input
+            ref={inputRef}
+            className={style('h-14 hidden')}
+            id={id}
+            key={key}
+            type={type}
+            name={name || id}
+            pattern={pattern}
+            disabled={disabled}
+            aria-label={ariaLabel}
+            onChange={(e: PreventableEventWithTargetFiles) => {
+              e?.target?.files && onChange(e?.target?.files[0]);
+            }}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            accept={extensionsToAccept(extensions)}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+const extensionsToAccept = (extensions: string[] = []): string => {
+  return extensions
+    .map((ext) => {
+      const str = String(ext).trim();
+
+      return str.startsWith('.') ? str : '.' + str;
+    })
+    .map((ext) => ext.toLowerCase())
+    .filter((ext, index, arr) => arr.indexOf(ext) === index)
+    .join(', ');
+};
+
+const renderFileName = (file?: File | null | undefined) => <span>{file?.name}</span>;

package/mobile/src/ui-kit/Input/renderInfoText.tsx

@@ -0,0 +1,15 @@
+import { Text } from '../Text/Text';
+import { ACCEPTED_EXTENSIONS_TEXT, MAX_SIZE_TEXT } from './constants';
+
+export const renderInfoText = (extensions?: string[], maxSize?: number) => {
+  const extensionsMessage = extensions
+    ? `${ACCEPTED_EXTENSIONS_TEXT} - ${extensions.join(', ')}. `
+    : '';
+  const maxSizeMessage = maxSize ? `${MAX_SIZE_TEXT} - ${maxSize}Мб.` : '';
+
+  return (
+    <Text size="text-xs" font="font-light" color="text-secondary-text">
+      {extensionsMessage + maxSizeMessage}
+    </Text>
+  );
+};

package/mobile/src/ui-kit/Input/styles.ts

@@ -0,0 +1,2 @@
+export const defaultStyle = 'w-full border rounded-md text-primary-text outline-none p-m';
+export const borderStyle = 'border-dashed';

package/mobile/src/ui-kit/Input/useVerifyFile.ts

@@ -0,0 +1,100 @@
+import { useMemo, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { sendFile, SUCCESS_STATUS, type ResponseData } from '../../api/sendFile';
+import { animateStepWithMinDuration } from '../../utils/animateStepWithMinDuration';
+import { debounce } from '../../utils/debounce';
+import { noop } from '../../utils/noop';
+import { checkFileExtension } from './checks/checkFIleExtension';
+import { checkFileMimeType } from './checks/checkFileMimeType';
+import { checkFileSignature } from './checks/checkFileSignature';
+import { checkFileSize } from './checks/checkFileSize';
+import { DEFAULT_ERROR_TEXT } from './constants';
+import { type FileInputProps } from './InputProps';
+
+const DEBOUNCE_DELAY = 500;
+
+interface VerifyFileProps extends FileInputProps {
+  onUploadError?: (value: string) => void;
+  onFileSelected?: (value: File) => void;
+  onUploadResponse?: (value: ResponseData) => void;
+}
+
+export type VerifyFileParams = {
+  file: File;
+  onFileChanged?: (value: string) => void;
+};
+
+export const useVerifyFile = ({
+  onUploadError = noop,
+  onFileSelected = noop,
+  extensions,
+  maxSizeMB,
+  onUploadResponse = noop,
+}: VerifyFileProps) => {
+  const [progress, setProgress] = useState(0);
+  const [isFileUploading, setIsFileUploading] = useState(false);
+
+  const debouncedOnFileUploaded = useMemo(
+    () => debounce((isUploading: boolean) => setIsFileUploading(isUploading), DEBOUNCE_DELAY),
+    [setIsFileUploading],
+  );
+  const debouncedOnUploadError = useMemo(
+    () => debounce((message: string) => onUploadError(message), DEBOUNCE_DELAY),
+    [onUploadError],
+  );
+
+  const debouncedOnUploadResponse = useMemo(
+    () => debounce((response: ResponseData) => onUploadResponse(response), DEBOUNCE_DELAY),
+    [onUploadResponse],
+  );
+
+  const verifyFile = async ({ file, onFileChanged = noop }: VerifyFileParams) => {
+    onFileSelected(file);
+    setIsFileUploading(true);
+
+    const checks = [
+      () => checkFileExtension(file, extensions),
+      () => checkFileSize(file, maxSizeMB),
+      () => checkFileSignature(file, extensions),
+      () => checkFileMimeType(file, extensions),
+    ];
+
+    const checkProgressStep = 50 / checks.length;
+    let currentProgress = 0;
+
+    try {
+      for (let i = 0; i < checks.length; i++) {
+        const checkPromise = checks[i];
+
+        await checkPromise();
+
+        const targetProgress = (i + 1) * checkProgressStep;
+
+        await animateStepWithMinDuration({
+          from: currentProgress,
+          to: targetProgress,
+          onUpdate: setProgress,
+          minDuration: 300,
+        });
+
+        currentProgress = targetProgress;
+      }
+
+      const response = await sendFile({
+        file,
+        onProgress: setProgress,
+      });
+      debouncedOnUploadResponse(response);
+      onFileChanged(response?.fileId ?? '');
+      if (response?.status === SUCCESS_STATUS) {
+        debouncedOnFileUploaded?.(false);
+      }
+    } catch (e) {
+      const errorMessage = e instanceof Error ? e.message : DEFAULT_ERROR_TEXT;
+      debouncedOnUploadError(errorMessage);
+      onFileChanged('');
+    }
+    debouncedOnFileUploaded?.(false);
+  };
+
+  return { verifyFile, isFileUploading, progress };
+};

package/mobile/src/ui-kit/PreventableEvent.ts

@@ -4,3 +4,8 @@ export interface PreventableEvent {
 }
 
 export type PreventableEventWithTarget = PreventableEvent & { target?: EventTarget | null };
+
+export type PreventableEventWithTargetFiles = PreventableEvent & {
+  target?: HTMLInputElement | null;
+  dataTransfer?: DataTransfer;
+};