Перейти к основному содержимому

FileUploader

Отображает диалоговое окно для загрузки файлов

Используется для загрузки файлов в файловое хранилище Платформы или в переменные состояния экранной формы. Имеет следующие режимы работы:

  • Default: Режим загрузки файлов по URL-адресу, полученному функцией GetUrlCommand.
  • Direct: Режим загрузки, при котором файлы передаются переменной event в обработчик события OnFilesChange этого компонента. Имеет режим отображения с областью для перетаскивания файла или без области c отображением только кнопки для открытия диалога выбора файла.
 <FileUploader
    Model-var="data.files"
    Text-Localizable="TechSupport.SupportSelectFile"
    OnFilesChange={() => getCommand('GetUploadLink')}
    OnFileCreate={(letterId = data.id) => getCommand('SaveFile', { letterId })}
    OnFileDelete={() => getCommand('DeleteFile')}
    OnClick={() => getCommand('GetDownloadLink')}
    OutputState-var="data.__fileUploaderBusy__"
    KeyMap={{ Name: 'fileName', Id: 'fileId' }}
    Multiple={true}
  />

Свойства​

AdditionalUploadInfo​

Дополнительная информация о загрузке, отображаемая в режиме WithDropzone ниже области для перетаскивания файла

Тип: string

AllowedFileTypes​

Разрешенные расширения и/или MIME-типы файлов для загрузки в виде массива

Тип: array

Autofocus​

Признак установки фокуса на компонент при загрузке страницы

Тип: boolean

Badge​

Количественная информация в компонентах Menu, Accordion, Link, Text.

В качестве значения может использоваться объект с полями: counter (число), position ("post" или "pre"), color (цвет)

Тип: any

CSS​

Массив строк-классов CSS-стилей, описанных в файле CSS.css DevTools-проекта или встроенных CSS-стилей Платформы. Пример: // CSS-стиль, определяющий внешние (m) и внутренние (p) отступы для компонента. Число после символа "-" (в этом примере - 4) должно быть кратно величине, указанной в параметре, определяющем кратность отступов, в файле Style.mdtheme DevTools-проекта CSS={["m-4", "p-4"]}

Тип: array

ChooseFileText​

Текст подсказки к кнопке или текст ссылки, по которой открывается список для выбора загружаемых файлов

Тип: string

Значение по умолчанию: Выберите файл

CombineConfig​

Служебное свойство, используемое в визуальном режиме Редактора Форм, для присваивания значений свойствам компонента в виде генерируемых фрагментов кода. Запрещено изменять значение

Тип: object

DataHint​

Текст, отображаемый при наведении указателя мыши на значок в виде кружка с буквой i. Это свойство актуально только для дочерних компонентов компонента Form и имеет смысл только при одновременном использовании свойства Label компонента

Тип: string

DeleteTooltipLabel​

Текст подсказки для кнопки "Удалить"

Тип: string

Значение по умолчанию: Удалить

Disabled​

Признак запрета на редактирование компонента

Тип: boolean

DownloadMode​

Тип выполняемого действия по нажатию кнопки мыши: скачивать или открывать файл, когда указатель мыши находится на этом файле в списке файлов

Тип: enum

Значение по умолчанию: Download

Возможные значения:

Download - Скачивание файла по нажатию кнопки мыши, когда указатель мыши находится на этом файле в списке файлов Open - Открытие файла по нажатию кнопки мыши, когда указатель мыши находится на этом файле в списке файлов

Error​

Текст ошибки при валидации компонента или undefined/false, если при валидации не обнаружены ошибки. Пример использования Error см. в статье Валидация данных перед отправкой на сервер

Тип: boolean

ErrorMessage​

Сообщение об ошибке при валидации компонента. Устаревшее свойство, используется только для совместимости с версиями Платформы до 3.0. Вместо ErrorMessage рекомендуется использовать свойство Error

Тип: string

Focused​

Признак установки фокуса на компонент в процессе работы приложения

Тип: boolean

GetUrlCommand​

Функция, возвращающая результат вызова метода getCommand() с именем действия для загрузки файла на сервер

Тип: object

Hidden​

Признак состояния компонента Скрыт

Тип: boolean

HighlightError​

Признак подсвечивания ошибки

Тип: boolean

Значение по умолчанию: True

Hint​

Подсказка над компонентом

Тип: string

HintPosition​

Позиция для отображения текста, определенного в свойстве DataHint

Тип: enum

Значение по умолчанию: right

Возможные значения:

left - Слева right - Справа top - Сверху bottom - Снизу topRight - Сверху справа topLeft - Сверху слева bottomRight - Снизу справа bottomLeft - Снизу слева

Id​

Идентификатор компонента для навигации к нему на HTML-странице. Подробнее см. HTML id Attribute или ID

Тип: string

KeyMap​

Имена полей объекта, в которые после завершения загрузки файла в файловое хранилище записывается имя и идентификатор файла. Кроме обязательных полей - имя и идентификатор - этот объект также имеет необязательные поля token и guid

Тип: object

Значение по умолчанию: <pre>{
"VariableName": ""
}</pre>

Label​

Надпись над компонентом

Тип: string

MaxFileSize​

Максимальный размер загружаемого файла (Мб). Если компонент настроен на загрузку файла в файловое хранилище Платформы и значение этого свойства больше значения, заданного для файлового сервиса Платформы, файл не загружается в файловое хранилище

Тип: number

Значение по умолчанию: 10000

MaxLength​

Максимальная длина вводимой строки

Тип: number

Значение по умолчанию: 30

Mode​

Режим работы компонента: загрузка файлов по URL-адресу, полученному функцией GetUrlCommand, или передача файлов переменной event в обработчик события OnFilesChange

Тип: enum

Значение по умолчанию: Default

Возможные значения:

Direct - Режим загрузки, при котором файлы передаются переменной event в обработчик события OnFilesChange этого компонента Default - Режим загрузки файлов по URL-адресу, полученному функцией GetUrlCommand

Model​

Псевдоним свойств Value и OutputValue. Пример использования Model см. в статье Валидация данных перед отправкой на сервер

Тип: any

Multiple​

Возможность выбора нескольких файлов

Тип: boolean

NoFilesText​

Текст, информирующий об отсутствии файлов в режиме отображения списка загруженных файлов

Тип: string

NoWriteOnInit​

Признак отказа от записи данных в переменную, заданную в свойствах OutputValue или Model, при создании компонента

Тип: boolean

OnBeforeUpload​

Обработчик события, предшествующего отправке файлов на сервер; в качестве параметра принимает массив загружаемых файлов, возвращает массив файлов для отправки на сервер

Тип: any

OnBlur​

Обработчик события потери фокуса компонентом. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа FocusEvent. Пример:

OnBlur={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль
  console.log(event);
}

Тип: undefined

OnChange​

Обработчик события изменения свойства Value компонента. Не имеет параметров. Пример:

OnChange={() => {
  // Вывод сообщения в консоль
  console.log("Компонент изменен");
}}

Тип: undefined

OnClick​

Обработчик события нажатия кнопки мыши на файле в списке

Тип: object

OnDelay​

Обработчик события изменения свойства Value компонента, вызываемый по истечении секунды после последнего изменения Value. Не имеет параметров. Пример:

OnDelay={() => {
  // Вывод сообщения в консоль
  console.log("Прошло более секунды после изменения компонента");
}

Тип: undefined

OnDropLabel​

Текст, отображаемый при размещении файла в области загрузки

Тип: string

Значение по умолчанию: Отпустите для начала загрузки...

OnEnterKeyDown​

Обработчик события нажатия кнопки Enter. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа KeyboardEvent. Пример:

OnEnterKeyDown={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль
  console.log(event);
}

Тип: undefined

OnFileCreate​

Обработчик события о добавлении нового файла в список

Тип: object

OnFileDelete​

Обработчик события об удалении файла из списка

Тип: object

OnFilesChange​

Обработчик события изменения списка файлов

Тип: object

Значение по умолчанию: OnFilesChange

OnFilesDelete​

Обработчик события удаления файла

Тип: object

OnKeyDown​

Обработчик события нажатия любой клавиши клавиатуры. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа KeyboardEvent. Пример: OnKeyDown={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnKeyUp​

Обработчик события отпускания любой клавиши клавиатуры. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа KeyboardEvent. Пример: OnKeyUp={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseDown​

Обработчик события нажатия любой кнопки мыши, когда указатель мыши находится на компоненте. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseDown={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseEnter​

Обработчик события перемещения указателя мыши на компонент. Событие срабатывает только в случае, если указатель мыши находится за пределами компонента и пользователь перемещает указатель мыши внутрь компонента. Если указатель мыши в текущий момент находится внутри компонента, для срабатывания события пользователь должен переместить указатель мыши за пределы компонента, а затем обратно внутрь компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseEnter={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseLeave​

Обработчик события перемещения указателя мыши за пределы компонента. Событие срабатывает, только если указатель мыши находится внутри компонента, а пользователь перемещает указатель мыши за пределы компонента. Если указатель мыши в текущий момент находится за пределами компонента, для срабатывания события пользователь должен переместить указатель мыши внутрь компонента, а затем обратно за пределы компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseLeave={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseMove​

Обработчик события наведения указателя мыши на компонент. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseMove={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseOut​

Обработчик события перемещения указателя мыши за пределы компонента. Когда пользователь наводит указатель мыши на компонент, происходит одно событие MouseOver, за которым следует одно или несколько событий MouseMove, когда пользователь перемещает указатель мыши внутри компонента. Одно событие MouseOut возникает, когда пользователь выводит указатель мыши за пределы компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseOut={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseOver​

Обработчик события перемещения указателя мыши на компонент. Событие возникает, когда пользователь наводит указатель мыши на компонент, и не повторяется до тех пор, пока пользователь не выведет указатель мыши за пределы компонента и затем не вернет его обратно. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseOver={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseUp​

Обработчик события отпускания кнопки мыши, когда указатель мыши находится на компоненте. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseUp={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnUnmount​

Обработчик события размонтирования согласно жизненному циклу экранной формы. Не имеет параметров. Пример:

OnUnmount={() => { // Отмена выполнения периодического действия при размонтировании экранной формы return clearInterval(getValue("pleerInterval")) } }

Тип: undefined

OutputState​

Имя переменной для сохранения состояния компонента "свободен"/"занят". Состояние компонента "занят" означает, что еще не все выбранные файлы загружены. После загрузки всех файлов состояние компонента считается "свободен"

Тип: any

OutputValue​

Выходной параметр компонента: введенное или выбранное в компоненте значение

Тип: any

OverlayText​

Сопровождающий текст-подсказка для компонента в режиме Transparent. Отображается при перетаскивании файла на прозрачную область

Тип: string

ReadOnly​

Признак запрета на редактирование компонента c возможностью копирования содержимого

Тип: boolean

Required​

Признак обязательности заполнения. Не влияет на валидацию, отображает звездочку справа от компонента

Тип: boolean

RestartTooltipLabel​

Текст подсказки для кнопки "Повторить"

Тип: string

Значение по умолчанию: Повторить

SingleButton​

Признак использования режима работы компонента с отображением единственной кнопки, по нажатию которой можно выбрать файл(ы) из файлового хранилища пользовательского устройства

Тип: boolean

Slot​

Именованное пространство во фрагменте экранной формы.

Тип: string

StopTooltipLabel​

Текст подсказки для кнопки "Остановить"

Тип: string

Значение по умолчанию: Остановить

Text​

Пояснительный текст в области компонента. Не является ссылкой

Тип: string

Значение по умолчанию: Перетащите или

Tooltip​

Текст, отображаемый при наведении указателя мыши на компонент. Текст отображается на черном фоне

Тип: any

TraceId​

Идентификатор для отслеживания состояния компонента исходя из жизненного цикла экранной формы. Используется для выполнения фрагмента кода по изменению состояния компонента

Тип: string

Transparent​

Признак использования прозрачного режима работы компонента, при котором дочерние компоненты являются областью для перетаскивания файлов

Тип: boolean

UploadFolder​

Имя существующей папки для загрузки. Имя папки должно содержать строчные буквы и не содержать пробелы

Тип: string

Значение по умолчанию: uploadfiles

Validation​

Признак ошибки валидации компонента. Устаревшее свойство, используется только для совместимости с версиями Платформы до 3.0. Вместо Validation рекомендуется использовать свойство Error

Тип: boolean

Value​

Входной параметр компонента: введенное или выбранное в компоненте значение

Тип: any

Visible​

Признак инверсии состояния компонента Скрыт

Тип: boolean

Значение по умолчанию: True

WithDropzone​

Режим отображения компонента с областью для перетаскивания файла или без области c отображением только кнопки для открытия диалога выбора файла

Тип: boolean

WithPreview​

Признак режима отображения списка загруженных файлов

Тип: boolean

Значение по умолчанию: True

Примеры​

Скрипты:


        const COLUMNS = [
  { title: 'Filename', dataType: 'string', alias: 'name' },
  { title: 'Token', dataType: 'date', alias: 'token' },
  { title: 'Guid', dataType: 'number', alias: 'guid' },
  { title: 'Size', dataType: 'number', alias: 'size' },
];
const paginationSettings = { skip: 0, take: 10 };
setState({
  COLUMNS,
  data: getValue('file22'),
  paginationSettings,
})

JSX:

<Group Mode="Wrap" CSS={['pl-16']}>
  <Group Height="50" Mode="Wrap">
    <Text Mode="Medium_32" Value="FileUploader 1.0" />
    <Group>
      <Text Color="GRAY_5" Mode="Regular_14" Value="Используется для загрузки файлов" />
    </Group>
  </Group>
  
  <Group Mode="Row" Height="auto" CSS={['five']}>
    <Group Mode="Wrap">
      <Group><Text Color="GRAY_5" CSS={['pb-16']} Mode="Regular_12" Value="Кнопка для выбора файлов из файлового хранилища устройства" /></Group>
        <FileUploader
          Text-Localizable='FileUploader.SettingsTemplate'
          GetUrlCommand={() => getCommand('UiKitFileUploaderGenerateUrlForUploadFile')}
          DownloadMode="Download"
          Multiple={true}
          Model-var="file33"
          OutputState-var="____fileUploaderBusy____"
          ChooseFileText-Localizable='FileUploader.SelectFile'
          WithDropzone={false} 
          Required={true}
          SingleButton={true}
          CSS={['uploaderSingleButtonMode']}
        />
        <Loader Visible-var="____fileUploaderBusy____" />
        <Text Visible={(file33) => file33 && file33.length} Color="GRAY_5" CSS={['pb-16']} Mode="Regular_12" Value="Демонстрация списка загруженных файлов" />
        <Repeater Visible={(file33) => file33 && file33.length} Value-var="file33" Mode="ol">
          <RepeaterItem Alias="item">
            <Group>
              <Group Width="70%">
                <Text Value-var="item.name"/>
              </Group>
              <Group >
                <Text Value={(size = item.size) => Math.round(size/1024)+' Кб'}/>
              </Group>
            </Group>
          </RepeaterItem>
        </Repeater>
    </Group>
    <Group Mode="Column">
        
    </Group>
  </Group>
  <Group Mode="Row" Height="auto">
    <Group Mode="Wrap">
       <Group><Text Color="GRAY_5" CSS={['pb-16']} Mode="Regular_12" Value="Область для перетаскивания файлов" /></Group>
        <FileUploader
          Text-Localizable='FileUploader.SettingsTemplate'
          GetUrlCommand={() => getCommand('UiKitFileUploaderGenerateUrlForUploadFile')}
          DownloadMode="Download"
          Multiple={true}
          Model-var="file22"
          OutputState-var="___fileUploaderBusy___"
          ChooseFileText-Localizable='FileUploader.SelectFile'
          WithDropzone={false} 
          Required={true}
          Transparent={true}
          OverlayText={() => getLocalization("FileUploader.DropYourFilesHere")}
          CSS={['uploaderTransparentMode']}
        >
          <Group>
              <Loader Visible-var="___fileUploaderBusy___" />
              <DataGrid
                  KeyField="Id"
                  Columns-var="COLUMNS"
                  Value-var="file22"
              />
          </Group>
        </FileUploader>
    </Group>
  </Group>
  <Group Height="auto">
    <Group Mode="Column">
      <Group Mode="Wrap">
        <Group><Text Color="GRAY_5" CSS={['pb-16']} Mode="Regular_12" Value="Открытие файла по нажатию кнопки мыши, когда указатель мыши находится на этом файле в списке файлов" /></Group>
          <FileUploader
            Text-Localizable="FileUploader.Template"
            GetUrlCommand={() => getCommand('UiKitFileUploaderGenerateUrlForUploadFile')}
            DownloadMode="Open"
            Multiple={true}
            Model-var="file"
            OutputState-var="__fileUploaderBusy__"
            ChooseFileText-Localizable='FileUploader.SelectFile'
            WithDropzone={false}
            CSS={['uploaderOpenOnClickMode']}
          />
          <Link
            Mode="DownloadById"
            Visible={(fileId = file[0].token) => fileId}
            DownloadKind="Minio"
            DownloadId={(fileId = file[0].token) => fileId}
            Text="Скачать файл"
          />
      </Group>
    </Group>
    <Group Mode="Column">
      <Group Mode="Wrap">
        <Group><Text Color="GRAY_5" CSS={['pb-16']} Mode="Regular_12" Value="Скачивание файла по нажатию кнопки мыши, когда указатель мыши находится на этом файле в списке файлов" /></Group>
        <FileUploader
          Text-Localizable='FileUploader.SettingsTemplate'
          GetUrlCommand={() => getCommand('UiKitFileUploaderGenerateUrlForUploadFile')}
          DownloadMode="Download"
          Multiple={false}
          Model-var="file2"
          OutputState-var="__fileUploaderBusy__"
          ChooseFileText-Localizable='FileUploader.SelectFile'
          WithDropzone={false} 
          Required={true}
          CSS={['uploaderDownloadOnClickMode']}
        />
      </Group>
    </Group>
  </Group>
  <Group Height="auto">
    <Group Mode="Wrap">
      <Group><Text Color="GRAY_5" CSS={['pb-16']} Mode="Regular_12" Value="Универсальный вариант выбора файлов" /></Group>
      <FileUploader
        AllowedFileTypes={["text/html", ".txt"]}
        Text-Localizable="FileUploader.DragAndDropOr"
        ChooseFileText-Localizable='FileUploader.LowCaseSelectFile'
        GetUrlCommand={() => getCommand('UiKitFileUploaderGenerateUrlForUploadFile')}
        DownloadMode="Download"
        Multiple={true}
        Model-var="file1"
        OutputState-var="__fileUploaderBusy__"
        WithDropzone={true}
        OnDropLabel-Localizable="FileUploader.DropYourFilesHere"
        MaxFileSize={10000}
        AdditionalUploadInfo-Localizable="FileUploader.MaximumFileSize"
        OnBeforeUpload={() => {
          const files = getEvent();
          return files.map(file => {
            const name = 'myPrefix-' + file.name;
            const newFile = new File([file], name, { type: file.type, lastModified: file.lastModified })
            newFile.extension = name.substring(name.lastIndexOf('.')) || file.extension;
            newFile.guid = file.guid;
            return newFile;
          });
        }}
        CSS={['uploaderWithDropzoneMode']}
        NoFilesText-Localizable='FileUploader.NoFiles'
      />
    </Group>
  </Group>
</Group>