diff --git a/src/attach/README.md b/src/attach/README.md
index 6dcb5c74db..1141e144e3 100644
--- a/src/attach/README.md
+++ b/src/attach/README.md
@@ -54,3 +54,22 @@ function handleChange(value) {
```
+
+С отображением прогресса загрузки файла
+```jsx
+function handleChange(value) {
+ setState({ value });
+}
+
+
+```
\ No newline at end of file
diff --git a/src/attach/attach.css b/src/attach/attach.css
index 06ea981f3b..7dc91b62f2 100644
--- a/src/attach/attach.css
+++ b/src/attach/attach.css
@@ -67,6 +67,7 @@
&__no-file {
display: inline;
margin-left: 0.5em;
+ text-align: center;
}
&__clear {
@@ -85,6 +86,10 @@
}
}
+ &__progress-bar {
+ margin-top: var(--gap-2xs);
+ }
+
&_disabled &__control {
cursor: default;
}
diff --git a/src/attach/attach.jsx b/src/attach/attach.jsx
index 0320bfce9f..b67d6aa73b 100644
--- a/src/attach/attach.jsx
+++ b/src/attach/attach.jsx
@@ -8,6 +8,7 @@ import Type from 'prop-types';
import Button from '../button/button';
import IconAttachment from '../icon/action/attachment';
+import ProgressBar from '../progress-bar';
import cn from '../cn';
import performance from '../performance';
@@ -119,8 +120,10 @@ class Attach extends React.Component {
accept: Type.string,
/** Управление возможностью изменения значения компонента */
disabled: Type.bool,
- /** Управляет возможностью выбора нескольких файлов */
+ /** Управление возможностью выбора нескольких файлов */
multiple: Type.bool,
+ /** Процент выполнения загрузки файла */
+ progressBarPercent: Type.number,
/** Размер компонента */
size: Type.oneOf(['s', 'm', 'l', 'xl']),
/** Тема компонента */
@@ -280,6 +283,12 @@ class Attach extends React.Component {
className={ cn('clear') }
onClick={ this.handleClearClick }
/>
+ { typeof this.props.progressBarPercent !== 'undefined' && (
+
+ ) }
);
}