feat(FileInput): added new input file input (#24)

Author: NasgulNexus

docs/spec.md

@@ -111,6 +111,7 @@ type Spec = ArraySpec | BooleanSpec | NumberSpec | ObjectSpec | StringSpec;
 | viewSpec.monacoParams      | `object`                                                           |          | [Parameters](#monacoparams) that must be passed to Monaco editor                                                                                                                        |
 | viewSpec.placeholder       | `string`                                                           |          | A short hint displayed in the field before the user enters the value                                                                                                                    |
 | viewSpec.themeLabel        | `'normal'` `'info'` `'danger'` `'warning'` `'success'` `'unknown'` |          | Label color                                                                                                                                                                             |
+| viewSpec.fileInput         | `object`                                                           |          | [Parameters](#FileInput) that must be passed to file input                                                                                                                              |
 
 #### SizeParams
 
@@ -127,6 +128,14 @@ type Spec = ArraySpec | BooleanSpec | NumberSpec | ObjectSpec | StringSpec;
 | language | `string` |   yes    | Syntax highlighting language |
 | fontSize | `string` |          | Font size                    |
 
+#### FileInput
+
+| Property     | Type                                                                          | Required | Description                                                                            |
+| :----------- | :---------------------------------------------------------------------------- | :------: | :------------------------------------------------------------------------------------- |
+| accept       | `string`                                                                      |          | Acceptable file extensions, for example: `'.png'`, `'audio/\*'`, `'.jpg, .jpeg, .png'` |
+| readAsMethod | `'readAsArrayBuffer'` `'readAsBinaryString'` `'readAsDataURL'` `'readAsText'` |          | File reading method                                                                    |
+| ignoreText   | `boolean`                                                                     |          | For `true`, will show the `File uploaded` stub instead of the field value              |
+
 #### Link
 
 A component that serves as a wrapper for the value, if necessary, rendering the value as a link.

src/lib/core/constants.ts

@@ -5,3 +5,9 @@ export enum SpecTypes {
     Object = 'object',
     String = 'string',
 }
+
+export type ReadAsMethod =
+    | 'readAsArrayBuffer'
+    | 'readAsBinaryString'
+    | 'readAsDataURL'
+    | 'readAsText';

src/lib/core/types/specs.ts

@@ -1,6 +1,6 @@
 import {LabelProps} from '@gravity-ui/uikit';
 
-import {SpecTypes} from '../constants';
+import {ReadAsMethod, SpecTypes} from '../constants';
 
 import {ArrayValue, ObjectValue} from './';
 
@@ -118,6 +118,11 @@ export interface StringSpec<LinkType = any> {
         hideValues?: string[];
         placeholder?: string;
         themeLabel?: LabelProps['theme'];
+        fileInput?: {
+            accept?: string;
+            readAsMethod?: ReadAsMethod;
+            ignoreText?: boolean;
+        };
     };
 }
 

src/lib/kit/components/Inputs/FileInput/FileInput.scss

@@ -0,0 +1,24 @@
+@import '../../../styles/variables.scss';
+
+.#{$ns}file-input {
+    display: flex;
+
+    &__input {
+        opacity: 0;
+        position: absolute;
+        clip: rect(0 0 0 0);
+        width: 1px;
+        height: 1px;
+        margin: -1px;
+    }
+
+    &__file-name {
+        display: block;
+        margin: auto 10px;
+        max-width: 160px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        color: var(--yc-color-text-secondary);
+    }
+}

src/lib/kit/components/Inputs/FileInput/FileInput.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+
+import {Xmark} from '@gravity-ui/icons';
+import {Button, Icon, Label} from '@gravity-ui/uikit';
+
+import {StringInputProps} from '../../../../core';
+import i18n from '../../../../kit/i18n';
+import {block} from '../../../utils';
+
+import {readFile} from './utils';
+
+import './FileInput.scss';
+
+const b = block('file-input');
+
+export const FileInput: React.FC<StringInputProps> = ({input, spec}) => {
+    const {value, onChange} = input;
+
+    const inputRef = React.useRef<HTMLInputElement>(null);
+
+    const [fileName, setFileName] = React.useState<string>('');
+
+    const handleClick = React.useCallback(() => {
+        inputRef.current?.click();
+    }, []);
+
+    const handleDownload = React.useCallback(
+        async (file: Blob) => await readFile(file, spec.viewSpec.fileInput?.readAsMethod),
+        [spec.viewSpec.fileInput?.readAsMethod],
+    );
+
+    const handleReset = React.useCallback(() => {
+        setFileName('');
+        onChange('');
+    }, [onChange]);
+
+    const handleInputChange = React.useCallback(
+        async (event: React.ChangeEvent<HTMLInputElement>) => {
+            const file = event.target.files;
+
+            if (file && file.length > 0) {
+                setFileName(file[0].name);
+                const data = (await handleDownload(file[0])) as string;
+                onChange(data);
+            }
+        },
+        [handleDownload, onChange],
+    );
+
+    const fileNameContent = React.useMemo(() => {
+        if (value) {
+            if (fileName) {
+                return <React.Fragment>{fileName}</React.Fragment>;
+            }
+
+            return (
+                <Label size="m" theme="info">
+                    {i18n('label-data_loaded')}
+                </Label>
+            );
+        }
+
+        return null;
+    }, [fileName, value]);
+
+    return (
+        <div className={b()}>
+            <Button disabled={spec.viewSpec.disabled} onClick={handleClick}>
+                {i18n('button-upload_file')}
+            </Button>
+            <input
+                type="file"
+                ref={inputRef}
+                autoComplete="off"
+                disabled={spec.viewSpec.disabled}
+                onChange={handleInputChange}
+                className={b('input')}
+                tabIndex={-1}
+                accept={spec.viewSpec.fileInput?.accept}
+            />
+            <span className={b('file-name')}>{fileNameContent}</span>
+            {value ? (
+                <Button view="flat" onClick={handleReset} disabled={spec.viewSpec.disabled}>
+                    <Icon data={Xmark} size={16} />
+                </Button>
+            ) : null}
+        </div>
+    );
+};

src/lib/kit/components/Inputs/FileInput/index.tsx

@@ -0,0 +1 @@
+export * from './FileInput';

src/lib/kit/components/Inputs/FileInput/utils.ts

@@ -0,0 +1,20 @@
+import {ReadAsMethod} from '../../../../core';
+
+export function readFile(
+    file: Blob,
+    readAsMethod: ReadAsMethod = 'readAsBinaryString',
+): Promise<string | ArrayBuffer | null> {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+
+        if (typeof reader[readAsMethod] !== 'function') {
+            reject(new Error(`Unknown parameter: ${readAsMethod}`));
+            return;
+        }
+
+        reader.addEventListener('load', () => resolve(reader.result));
+        reader.addEventListener('error', () => reject(reader.error));
+
+        reader[readAsMethod](file);
+    });
+}

src/lib/kit/components/Inputs/index.ts

@@ -1,6 +1,7 @@
 export * from './ArrayBase';
 export * from './CardOneOf';
 export * from './Checkbox';
+export * from './FileInput';
 export * from './MultiSelect';
 export * from './ObjectBase';
 export * from './OneOf';

src/lib/kit/components/Views/FileInputView/FileInputView.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import {StringViewProps} from '../../../../core';
+import i18n from '../../../../kit/i18n';
+import {LongValue} from '../../../components';
+
+export const FileInputView: React.FC<StringViewProps> = ({value, spec}) => (
+    <LongValue value={spec.viewSpec.fileInput?.ignoreText ? i18n('label-data_loaded') : value} />
+);

src/lib/kit/components/Views/FileInputView/index.ts

@@ -0,0 +1 @@
+export * from './FileInputView';