@eisgs/attach NPM

Базовый Attach

Компонент <Attach> позволяет прикреплять файлы. Ссылка на компонент ref пробрасывается в обертку над компонентом.

const fetchUpload = ({ file, fileName }) =>
  Promise.resolve({
    id: Math.random(),
    name: fileName,
    size: file.size,
  });

const [file, setFile] = React.useState(null);

<Attach 
  apiMethodFileDownload={() => {}} 
  fetchUpload={fetchUpload} 
  onChange={setFile} 
  value={file} 
  label="Прикрепить скан-копию"
  hint="Прикрепить скан-копию"
/>

По умолчанию, прикрепить можно только один файл. Для того, чтобы прикрепить несколько файлов, необходимо передать флаг multiple со значением true, а также установить параметр maxFiles, отвечающего за максимальное количество прикрепленных файлов.

const fetchUpload = ({ file, fileName }) =>
  Promise.resolve({
    id: Math.random(),
    name: fileName,
    size: file.size,
  });

const [files, setFiles] = React.useState(null);

<Attach
  multiple
  apiMethodFileDownload={() => {}}
  fetchUpload={fetchUpload}
  onChange={setFiles}
  value={files}
  maxFiles={5}
  label="Прикрепить скан-копию"
/>

Проверка на уникальность наименований прикрепленных файлов

Если флаг checkUniqueName передан со значением true, то при прикреплении 2-х или более файлов с одинаковыми наименованиями высветится ошибка.

const fetchUpload = ({ file, fileName }) =>
  Promise.resolve({
    id: Math.random(),
    name: fileName,
    size: file.size,
  });

const [files, setFiles] = React.useState(null);

<Attach
  checkUniqueName
  multiple
  apiMethodFileDownload={() => {}}
  fetchUpload={fetchUpload}
  onChange={setFiles}
  value={files}
  maxFiles={5}
  label="Прикрепить скан-копию"
/>

Ограничения

Если флаг disabled передан со значением true, прикрепление файлов будет запрещено.

<Attach 
  disabled 
  apiMethodFileDownload={() => {}} 
  fileDownload={() => {}} 
/>

Если флаг disabledDownload передан со значением true, скачивание файлов будет запрещено.

const fetchUpload = ({ file, fileName }) =>
  Promise.resolve({
    id: Math.random(),
    name: fileName,
    size: file.size,
  });

const [file, setFile] = React.useState({
  id: '0',
  name: 'Test file',
  size: '1000',
});

<Attach 
  disabledDownload 
  apiMethodFileDownload={() => {}} 
  fetchUpload={fetchUpload} 
  onChange={setFile} 
  value={file} 
/>

Если флаг disabledRemove передан со значением true, удаление файлов будет запрещено.

const file = {
  id: '0',
  name: 'Test file',
  size: '1000',
};

<Attach 
  disabledRemove 
  apiMethodFileDownload={() => {}} 
  value={file} 
/>

emptyListText

В параметре emptyListText можно передать текст, которые будет выведен над drag'n'drop зоной если в <Attach> не были переданы файлы, но был передан флаг disabled равный true.

<Attach 
  disabled 
  apiMethodFileDownload={() => {}} 
  emptyListText="Прикрепленные файлы отсутствуют" 
/>

Отображение ошибок

Сообщение об ошибке может быть передано в параметре error.

<Attach 
  disabled 
  apiMethodFileDownload={() => {}} 
  error="Ошибка" 
/>

Допустимые расширения файлов/максимальный размер файла

Набор допустимых расширений файлов задается в параметре extensions. Текстовая информация о допустимых расширениях файлов задается в параметре extensionsText. Максимальный размера файла (МБ) задается в параметре maxSize. Для отображения extensionsText и maxSize также необходимо передать флаг showRestrictionHints.

const fetchUpload = ({ file, fileName }) =>
  Promise.resolve({
    id: Math.random(),
    name: fileName,
    size: file.size,
  });

const [files, setFiles] = React.useState([]);

<Attach
  multiple
  showRestrictionHints
  apiMethodFileDownload={() => {}}
  fetchUpload={fetchUpload}
  onChange={setFiles}
  maxFiles={5}
  maxSize={10}
  extensions={['.pdf', '.doc', '.docx']}
  extensionsText="PDF, Doc/Docx"
  value={files}
  label="Прикрепить скан-копию"
/>

Текст и подсказки

Параметр Label позволяет указать дополнительную информацию для пользователя над drag'n'drop зоной. В параметре hint можно передать текст подсказки.

const fetchUpload = ({ file, fileName }) =>
  Promise.resolve({
    id: Math.random(),
    name: fileName,
    size: file.size,
  });

const [files, setFiles] = React.useState([]);

<Attach
  multiple
  apiMethodFileDownload={() => {}}
  fetchUpload={fetchUpload}
  onChange={setFiles}
  label="Прикрепить скан-копию"
  hint="Подсказка"
  maxFiles={5}
  value={files}
/>;

uploadedListTitle

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

const files = [
  {
    id: '0',
    name: 'Test file',
    size: '1000',
  },
];

<Attach 
  disabledRemove 
  apiMethodFileDownload={() => {}} 
  uploadedListTitle="Загруженные файлы" 
  value={files} 
/>

dropzoneVariant

Параметр dropzoneVariant позволяет управлять высотой области загрузки - доступные значения: reduced и standard. Значение по умолчанию standard

const dropzoneVariant = ['standart', 'reduced'];

<>
  {dropzoneVariant.map(variant => (
    <Attach
      key={variant}
      apiMethodFileDownload={() => {}}
      uploadedListTitle="Загруженные файлы"
      value={[]}
      label={variant}
      dropzoneVariant={variant}
    />
  ))}
</>

Подписывание файлов (signature)

Подписывать файлы можно двумя способами:

Первый вариант

Подписывать файлы с помощью плагина Crypto-pro по нажатию на кнопку Подписать файл. Для этого необходимо передать параметр allowToSignFiles.

Подписываются файлы с помощью плагина Crypto-pro. Подпись имеет формат PKCS#7 (метод createDetachedSignature). Соответственно, в данном случае подпись имеет тип string.

При успешном подписании файла вызывается callback onSignFileSuccess, при неудачном - onSignFileFailure.

Второй вариант

Прикреплять к файлу подпись по нажатию на кнопку Подписать файл. Для этого необходимо передать параметр allowToSignFiles. В данном случае к файлу можно добавить подпись в формате .sig. Валидация подписи на клиенте не производится.

При позитивном сценарии после подписания файла/добавлении подписи вызывается метод fetchUploadSignature. Ожидается, что он вернет Promise с телом, соответствующим IAttachmentSignatureInfo. При успешной загрузке подписи будет вызван callback onUploadSignatureSuccess, при неудачной - onUploadSignatureFailure.

Для удаления подписи вызывается fetchDeleteSignature. При успешном удалении вызывается callback onDeleteSignatureSuccess, при неудачном - onDeleteSignatureFailure.

Если необходимо скрыть подписи и функционал, связанный с подписью, необходимо передать флаг hideAttachmentsSignatures.

Пример прикрепления подписи к файлу:

const defaultFiles = [
  {
    id: '0',
    name: 'Файл 1.pdf',
    size: '1000',
  },
  {
    id: '1',
    name: 'Файл 2.pdf',
    size: '1028',
    signature: {
      id: '1',
      status: 'valid',
    },
  },
  {
    id: '2',
    name: 'Файл 3.pdf',
    size: '1000',
    signature: {
      id: '2',
      status: 'invalid',
    },
  },
  {
    id: '3',
    name: 'Файл 4.pdf',
    size: '2048',
  },
  {
    id: '4',
    name: 'Файл 5.pdf',
    size: '4096',
  },
];

const fetchUpload = ({ file, fileName }) =>
  Promise.resolve({
    id: String(Math.random()),
    name: fileName,
    size: file.size,
  });

const delay = (ms) => new Promise((res) => { setTimeout(res, ms); });

const fetchUploadSignature = async (fileId, signature) => {
  const isSignatureValid = Math.random();

  await delay(3000);
  
  return Promise.resolve({
    id: String(Math.random()),
    status: isSignatureValid > 0.5 ? 'valid' : 'invalid',
    name: signature.name,
  });
};

const fetchDeleteSignature = async () => {
  await delay(3000);

  return {};
};

const [files, setFiles] = React.useState(defaultFiles);

<Attach
  allowToAttachSignatures
  allowToSignFiles
  multiple
  showRestrictionHints
  apiMethodFileDownload={() => '/'}
  fetchUpload={fetchUpload}
  fetchDownload={() => '/'}
  onChange={setFiles}
  maxFiles={10}
  value={files}
  fetchUploadSignature={fetchUploadSignature}
  fetchDeleteSignature={fetchDeleteSignature}
  label="Прикрепить скан-копию"
  maxSize={10}
  extensions={['.pdf', '.doc', '.docx']}
  extensionsText="PDF, Doc/Docx"
/>