New Power Management

    @eisgs/attach

    1.4.1 • Public • Published

    Базовый 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"
    />

    Keywords

    none

    Install

    npm i @eisgs/attach

    DownloadsWeekly Downloads

    383

    Version

    1.4.1

    License

    MIT

    Unpacked Size

    480 kB

    Total Files

    6

    Last publish

    Collaborators

    • traidersu
    • krll_mdntsv
    • lzdyd