55 lines
2.0 KiB
JavaScript
55 lines
2.0 KiB
JavaScript
import React from "react";
|
||
import Dropzone from 'react-dropzone';
|
||
|
||
const LIMIT = 10000000;
|
||
const LIMIT_FILES = 10;
|
||
|
||
export default class FileDropzone extends React.Component
|
||
{
|
||
constructor(props)
|
||
{
|
||
super(props);
|
||
this.state = {};
|
||
}
|
||
|
||
render()
|
||
{
|
||
const { files, onAddFile, onDeleteFile } = this.props;
|
||
|
||
return (
|
||
<>
|
||
{ files.length > 0 && (
|
||
<div className="column">
|
||
<div className="column_text_block">
|
||
<p><b>Приложенные файлы ({ files.length }/{ LIMIT_FILES })</b></p>
|
||
{ files.map((file, index) => (
|
||
<p key={ index }>{ file.size > LIMIT && (<span style={{ color: "#A8026B", }}>Ошибка, превышен допустимый размер файла в 10 мб.</span>) } { file.name } - { parseFloat(file.size / 1000000).toFixed(file.size < 100000 ? 3 : 2) } мб. <small style={{ color: "#A8026B", textDecoration: "underline", cursor: "pointer" }} onClick={ () => onDeleteFile(file.name) }>[ удалить ]</small></p>
|
||
)) }
|
||
</div>
|
||
</div>
|
||
) }
|
||
<div className="column">
|
||
<div className="column_text_block">
|
||
<p style={{ color: "#999", fontStyle: "italic" }}>Вы можете приложить до 10 файлов, максимальный размер одного файла: 10 мегабайт.</p>
|
||
</div>
|
||
</div>
|
||
{ files.length < LIMIT_FILES && (
|
||
<Dropzone onDrop={ (acceptedFiles) => onAddFile(acceptedFiles) } maxFiles={ LIMIT_FILES }>
|
||
{ ({getRootProps, getInputProps}) => (
|
||
<div className="file_upload dropzone" { ...getRootProps() }>
|
||
<div className="files"></div>
|
||
<div>
|
||
<p data-sm-text="Выберите файлы">
|
||
<span>Перенесите файлы на экран для быстрой загрузки или выберите файл с компьютера </span>
|
||
</p>
|
||
<label htmlFor="" className="button button-blue">Загрузить файл</label>
|
||
</div>
|
||
<input { ...getInputProps() } />
|
||
</div>
|
||
) }
|
||
</Dropzone>
|
||
) }
|
||
</>
|
||
)
|
||
}
|
||
} |