FileUploader

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

Используется для загрузки файлов в файловый сервис Платформы. Согласно дизайн-системе Платформы имеет несколько вариантов отображения и режимов работы.

Загружает файлы в файловый сервис, либо в переменные состояния экранной формы. Может отображатся в виде поля для выбора файла или в виде области с возможностью перетаскивания файла.

 <FileUploader
    Value-var="data.files"
    Text-Localizable="TechSupport.SupportSelectFile"
    OnFilesChange={() => getCommand('GetUploadLink')}
    OnFileCreate={(letterId = data.id) => getCommand('SaveFile', { letterId })}
    OnFileDelete={() => getCommand('DeleteFile')}
    OnClick={() => getCommand('GetDownloadLink')}
    OutputValue-var="data.files"
    OutputState-var="data.__fileUploaderBusy__"
    KeyMap={{ Name: 'fileName', Id: 'fileId' }}
    Multiple={true}
  />

Свойства

Имя	Описание	Тип	Значение по умолчанию	Возможные значения
AdditionalUploadInfo	Дополнительная информация о загрузке	string
AllowedFileTypes	Разрешенные расширения и/или MIME-типы файлов для загрузки в виде массива	array
Autofocus	Признак установки фокуса на компонент	boolean	False
Badge	Количественная информация в компонентах Menu, Accordion, Link, Text. В качестве значения может использоваться объект с полями: counter (число), position ("post" или "pre"), color (цвет)	any
CSS	Массив строк-классов CSS-стилей компонента	array
ChooseFileText	Текст на кнопке	string	Выберите файл
CombineConfig	Конфигурация всех событий компонента. Служебное свойство для генерации фрагментов кода в визуальном режиме редактора форм. Не рекомендуется указывать значение вручную	object
DataHint	Подсказка к компоненту	string
DeleteTooltipLabel	Текст подсказки для кнопки "Удалить"	string	Удалить
Disabled	Признак запрета на редактирование компонента	boolean	False
DownloadMode	Поведение компонента: скачивать или открывать файл по щелчку на нем в списке файлов	enum	Download	Download - Скачивание файла по щелчку на нем в списке файлов Open - Открытие файла по щелчку на нем в списке файлов
Error	Тескт ошибки при валидации компонента или undefined/false, если при валидации не обнаружены ошибки	boolean	False
ErrorMessage	Сообщение об ошибке при валидации компонента. Устаревшее свойство, используется только для совместимости с версиями Платформы до 3.0. Вместо ErrorMessage рекомендуется использовать свойство Error	string
Focused	Признак фокусировки на компоненте	boolean	False
GetUrlCommand	Команда получения URL-адреса для загрузки файла	object
Hidden	Признак состояния компонента Скрыт	boolean	False
HighlightError	Признак подсвечивания ошибки	boolean	True
Hint	Подсказка над компонентом	string
HintPosition	Сторона — правая или левая — для отображения подсказки	enum	right	left - Слева right - Справа top - Сверху bottom - Снизу topRight - Сверху справа topLeft - Сверху слева bottomRight - Снизу справа bottomLeft - Снизу слева
Id	Идентификатор компонента для навигации к нему на HTML-странице	string
KeyMap	Имя переменной, которая доступна элементу списка файлов	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	any
Multiple	Возможность выбора нескольких файлов	boolean	False
NoWriteOnInit	Признак отказа от записи данных в переменную, заданную в свойствах OutputValue или Model, при создании компонента	boolean	False
OnBeforeUpload	Обработчик события, предшествующего отправке файлов на сервер; в качестве параметра принимает массив загружаемых файлов и должен вернуть массив файлов для отправки	any
OnBlur	Параметры команды, отправляемой при потере фокуса компонентом	undefined
OnChange	Параметры команды, отправляемой при изменении компонента, например, при вводе текста, выборе из списка	undefined
OnClick	Обработчик события по щелчку на файле в списке	object
OnDelay	Параметры команды, отправляемой по истечении секунды (для предотвращения ложного срабатывания обработчика события) после последнего изменения модели данных	undefined
OnDropLabel	Текст, отображаемый при размещении файла в области загрузки	string	Отпустите для начала загрузки...
OnEnterKeyDown	Параметры команды, отправляемой по нажатию Enter	undefined
OnFileCreate	Обработчик события о добавлении нового файла в список	object
OnFileDelete	Обработчик события об удалении файла из списка	object
OnFilesChange	Обработчик события об изменении списка файлов	object	OnFilesChange
OnFilesDelete	Обработчик события об удалении файла	object
OnKeyDown	Обработчик события KeyDown	undefined
OnKeyUp	Обработчик события KeyUp	undefined
OnMouseDown	Обработчик события MouseDown	undefined
OnMouseEnter	Обработчик события MouseEnter	undefined
OnMouseLeave	Обработчик события MouseLeave	undefined
OnMouseMove	Обработчик события MouseMove	undefined
OnMouseOut	Обработчик события MouseOut	undefined
OnMouseOver	Обработчик события MouseOver	undefined
OnMouseUp	Обработчик события MouseUp	undefined
OnUnmount	Обработчик события Unmount	undefined
OutputState	Имя переменной для сохранения состояния компонента	any
OutputValue	Привязка отрисованного компонента к модели	any
OverlayText	Сопровождающий текст-подсказка контрола в режиме Transparent.	string
ReadOnly	Признак запрета на редактирование компонента c возможностью копирования содержимого	boolean	False
Required	Признак обязательности заполнения. Не влияет на валидацию, отображает звездочку справа от надписи	boolean	False
RestartTooltipLabel	Текст подсказки для кнопки "Повторить"	string	Повторить
SingleButton	Режим работы компонента, при котором отображается единственная кнопка; по нажатию кнопки пользователь может выбрать файл(ы) из файлового хранилища своего устройства	boolean	False
Slot	Метка для динамического добавления другого компонента по его идентификатору	string
StopTooltipLabel	Текст подсказки для кнопки "Остановить"	string	Остановить
Text	Текст на кнопке выбора файла	string	Select file
Tooltip	Всплывающая подсказка над компонентом, чаще используемая для пояснения назначения значка	any
TraceId	Идентификатор для отслеживания состояния компонента исходя из хронологической последовательности: создание, отрисовка, обновление, удаление; используется для выполнения фрагмента кода по изменению состояния компонента	string
Transparent	Прозрачный режим работы компонента, при котором дочерние компоненты становятся областью для перетаскивания файлов	boolean	False
UploadFolder	Имя существующей папки для загрузки; имя папки должно содержать только строчные буквы и не содержать пробелы	string	uploadfiles
Validation	Признак ошибки валидации компонента. Устаревшее свойство, используется только для совместимости с версиями Платформы до 3.0. Вместо Validation рекомендуется использовать свойство Error	boolean	False
Value	Привязка модели к отрисованному компоненту	any
Visible	Признак инверсии состояния компонента Скрыт	boolean	True
WithDropzone	Режим отображения компонента с областью для перетаскивания файла или без области c отображением только кнопки для открытия диалога выбора файла	boolean	False
WithPreview	Признак режима отображения списка загруженных файлов	boolean	True
WriteMode	Имя события, по которому меняется значение переменной состояния (экранной формы), переданной в качестве OutputValue	enum		- Режим ввода без контроля состояния компонента

Примеры

Скрипты:

        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="Шаблон настроек"
          GetUrlCommand={() => getCommand('UiKitFileUploaderGenerateUrlForUploadFile')}
          DownloadMode="Download"
          Multiple={true}
          Value-var="file33"
          OutputValue-var="file33"
          OutputState-var="____fileUploaderBusy____"
          ChooseFileText='Выберите файл'
          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="Шаблон настроек"
          GetUrlCommand={() => getCommand('UiKitFileUploaderGenerateUrlForUploadFile')}
          DownloadMode="Download"
          Multiple={true}
          Value-var="file22"
          OutputValue-var="file22"
          OutputState-var="___fileUploaderBusy___"
          ChooseFileText='Выберите файл'
          WithDropzone={false} 
          Required={true}
          Transparent={true}
          OverlayText={() => getLocalization("Platform.FileUploaderOverlay")}
          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="Шаблон файла "
            GetUrlCommand={() => getCommand('UiKitFileUploaderGenerateUrlForUploadFile')}
            DownloadMode="Open"
            Multiple={true}
            Value-var="file"
            OutputValue-var="file"
            OutputState-var="__fileUploaderBusy__"
            ChooseFileText='Выберите файл'
            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="Шаблон настроек"
          GetUrlCommand={() => getCommand('UiKitFileUploaderGenerateUrlForUploadFile')}
          DownloadMode="Download"
          Multiple={false}
          Value-var="file2"
          OutputValue-var="file2"
          OutputState-var="__fileUploaderBusy__"
          ChooseFileText='Выберите файл'
          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="Перетащите или"
        ChooseFileText="выберите файл"
        GetUrlCommand={() => getCommand('UiKitFileUploaderGenerateUrlForUploadFile')}
        DownloadMode="Download"
        Multiple={true}
        Value-var="file1"
        OutputValue-var="file1"
        OutputState-var="__fileUploaderBusy__"
        WithDropzone={true}
        OnDropLabel="Отпустите для начала загрузки..."
        MaxFileSize={10000}
        AdditionalUploadInfo={'Максимальный размер файла 10000 Мб'}
        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']}
      />
    </Group>
  </Group>
</Group>