attach
Use this block to upload a file for sending to a server.
Overview
Modifiers of the block
| Modifier |
Acceptable values |
Use cases |
Description |
| disabled |
true |
BEMJSON, JS |
The disabled state. |
| focused |
true |
BEMJSON, JS |
The block is in focus. |
| theme |
'islands' |
BEMJSON |
A custom design. |
| size |
's', 'm', 'l', 'xl' |
BEMJSON |
The size of the block. Use sizes only with the theme modifier set to islands. |
Custom fields of the block
| Field |
Type |
Description |
| name |
String |
The unique block name. |
| button |
String, BEMJSON |
Content of hte button for a file selection. |
| noFileText |
String |
The text message that appears when the file is not selected. |
Block description
By default this block is visually represented by:
- The button that opens the system window to upload a file.
- The text message.
The following elements became available when upload of the file is finished:
- The file icon (the icon block).
- The file name (the
text element).
- The element for file deletion (the
clear element).
The block functionality does not support:
- More than one file attaching.
- Drag-and-drop.
Modifiers of the block
disabled modifier
Acceptable value: true.
Use case: BEMJSON, JS.
The modifier makes the block inactive. The disabled block is visible but not available for user actions.
Open in a new window<span class="attach attach_theme_islands attach_size_m attach_disabled i-bem" data-bem='{"attach":{}}'><span class="button button_size_m button_theme_islands button_disabled button__control i-bem" data-bem='{"button":{}}' role="button" aria-disabled="true"><input class="attach__control" type="file" disabled="disabled"><span class="button__text">Select file</span></span>
<span
class="attach__no-file">No file selected</span>
</span>
{
block: 'attach',
mods: {
theme: 'islands',
size: 'm',
disabled: true
},
button: 'Select file',
noFileText: 'No file selected'
}
[
{
block: 'attach',
mods: {
theme: 'islands',
size: 'm',
disabled: true
}
}
]
focused modifier
Acceptable value: true.
Use case: BEMJSON, JS.
The modifier puts the focus on the block.
{
block : 'attach',
mods : { theme : 'islands', size : 'm', focused : true },
button : 'Select file',
noFileText : 'No file selected'
}
theme modifier
Acceptable value: 'islands'.
Use case: BEMJSON.
The modifier gives the block a custom design.
The islands theme requires the size modifier usage.
Open in a new window<span class="attach attach_theme_islands attach_size_m i-bem" data-bem='{"attach":{}}'><span class="button button_size_m button_theme_islands button__control i-bem" data-bem='{"button":{}}' role="button"><input class="attach__control" type="file"><span class="button__text">Select file</span></span>
<span
class="attach__no-file">No file selected</span>
</span>
{
block: 'attach',
mods: {
theme: 'islands',
size: 'm'
},
button: 'Select file',
noFileText: 'No file selected'
}
[
{
block: 'attach',
mods: {
theme: 'islands',
size: 'm'
}
}
]
size modifier
Acceptable values for the islands theme: 's', 'm', 'l', 'xl'.
Use case: BEMJSON.
Use the size modifier only for blocks with the islands theme.
Sets the size value for all types of attach forms.
s
Open in a new window<span class="attach attach_theme_islands attach_size_s i-bem" data-bem='{"attach":{}}'><span class="button button_size_s button_theme_islands button__control i-bem" data-bem='{"button":{}}' role="button"><input class="attach__control" type="file"><span class="button__text">Select file</span></span>
<span
class="attach__no-file">No file selected</span>
</span>
{
block: 'attach',
mods: {
theme: 'islands',
size: 's'
},
button: 'Select file',
noFileText: 'No file selected'
}
[
{
block: 'attach',
mods: {
theme: 'islands',
size: 's'
}
}
]
m
Open in a new window<span class="attach attach_theme_islands attach_size_m i-bem" data-bem='{"attach":{}}'><span class="button button_size_m button_theme_islands button__control i-bem" data-bem='{"button":{}}' role="button"><input class="attach__control" type="file"><span class="button__text">Select file</span></span>
<span
class="attach__no-file">No file selected</span>
</span>
{
block: 'attach',
mods: {
theme: 'islands',
size: 'm'
},
button: 'Select file',
noFileText: 'No file selected'
}
[
{
block: 'attach',
mods: {
theme: 'islands',
size: 'm'
}
}
]
l
Open in a new window<span class="attach attach_theme_islands attach_size_l i-bem" data-bem='{"attach":{}}'><span class="button button_size_l button_theme_islands button__control i-bem" data-bem='{"button":{}}' role="button"><input class="attach__control" type="file"><span class="button__text">Select file</span></span>
<span
class="attach__no-file">No file selected</span>
</span>
{
block: 'attach',
mods: {
theme: 'islands',
size: 'l'
},
button: 'Select file',
noFileText: 'No file selected'
}
[
{
block: 'attach',
mods: {
theme: 'islands',
size: 'l'
}
}
]
xl
Open in a new window<span class="attach attach_theme_islands attach_size_xl i-bem" data-bem='{"attach":{}}'><span class="button button_size_xl button_theme_islands button__control i-bem" data-bem='{"button":{}}' role="button"><input class="attach__control" type="file"><span class="button__text">Select file</span></span>
<span
class="attach__no-file">No file selected</span>
</span>
{
block: 'attach',
mods: {
theme: 'islands',
size: 'xl'
},
button: 'Select file',
noFileText: 'No file selected'
}
[
{
block: 'attach',
mods: {
theme: 'islands',
size: 'xl'
}
}
]
Custom fields of the block
name field
Type: String.
Specifies the block unique name.
Open in a new window<span class="attach attach_theme_islands attach_size_m i-bem" data-bem='{"attach":{}}'><span class="button button_size_m button_theme_islands button__control i-bem" data-bem='{"button":{}}' role="button"><input class="attach__control" type="file" name="attach-logo"><span class="button__text">Select file</span></span>
<span
class="attach__no-file"></span>
</span>
{
block: 'attach',
mods: {
theme: 'islands',
size: 'm'
},
name: 'attach-logo',
button: 'Select file'
}
[
{
block: 'attach',
mods: {
theme: 'islands',
size: 'm'
}
}
]
button field
Type: String, BEMJSON.
Specifies the button content:
Open in a new window<span class="attach attach_theme_islands attach_size_m i-bem" data-bem='{"attach":{}}'><span class="button button_size_m button_theme_islands button__control i-bem" data-bem='{"button":{}}' role="button"><input class="attach__control" type="file"><span class="button__text">Select file</span></span>
<span
class="attach__no-file"></span>
</span>
{
block: 'attach',
mods: {
theme: 'islands',
size: 'm'
},
button: 'Select file'
}
[
{
block: 'attach',
mods: {
theme: 'islands',
size: 'm'
}
}
]
- The type and appearance (
BEMJSON)
Open in a new window<span class="attach attach_theme_islands attach_size_m i-bem" data-bem='{"attach":{}}'><span class="button button_size_m button_theme_islands button__control i-bem" data-bem='{"button":{}}' role="button"><input class="attach__control" type="file"><span class="icon icon_action_download"></span>
<span
class="button__text">Выберите файл</span>
</span><span class="attach__no-file"></span></span>
{
block: 'attach',
mods: {
theme: 'islands',
size: 'm'
},
button: {
block: 'button',
icon: {
block: 'icon',
mods: {
action: 'download'
}
},
text: 'Выберите файл'
}
}
[
{
block: 'attach',
mods: {
theme: 'islands',
size: 'm'
}
}
]
noFileText field
Type: String.
Specifies the text message when the file is not selected.
Open in a new window<span class="attach attach_theme_islands attach_size_m i-bem" data-bem='{"attach":{}}'><span class="button button_size_m button_theme_islands button__control i-bem" data-bem='{"button":{}}' role="button"><input class="attach__control" type="file"><span class="button__text">Select file</span></span>
<span
class="attach__no-file">No file selected</span>
</span>
{
block: 'attach',
mods: {
theme: 'islands',
size: 'm'
},
button: 'Select file',
noFileText: 'No file selected'
}
[
{
block: 'attach',
mods: {
theme: 'islands',
size: 'm'
}
}
]