@eisgs/attach
v2.1.3
Published
Компонент `<Attach>` позволяет прикреплять файлы. Ссылка на компонент `ref` пробрасывается в обертку над компонентом.
Downloads
83
Readme
Базовый 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"
/>