134 lines
3.2 KiB
JavaScript
134 lines
3.2 KiB
JavaScript
import React, { useState, useRef } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import FileUploader from 'components/FormItems/uploaders/UploadService';
|
|
import Errors from '../../../components/FormItems/error/errors';
|
|
|
|
const FilesUploader = (props) => {
|
|
const { value, onChange, schema, path, max, readonly } = props;
|
|
|
|
const [loading, setLoading] = useState(false);
|
|
const inputElement = useRef(null);
|
|
|
|
const valuesArr = () => {
|
|
if (!value) {
|
|
return [];
|
|
}
|
|
return Array.isArray(value) ? value : [value];
|
|
};
|
|
|
|
const fileList = () => {
|
|
return valuesArr().map((item) => ({
|
|
uid: item.id || undefined,
|
|
name: item.name,
|
|
status: 'done',
|
|
url: item.publicUrl,
|
|
}));
|
|
};
|
|
|
|
const handleRemove = (id) => {
|
|
onChange(valuesArr().filter((item) => item.id !== id));
|
|
};
|
|
|
|
const handleChange = async (event) => {
|
|
try {
|
|
const files = event.target.files;
|
|
|
|
if (!files || !files.length) {
|
|
return;
|
|
}
|
|
|
|
let file = files[0];
|
|
|
|
FileUploader.validate(file, schema);
|
|
|
|
setLoading(true);
|
|
|
|
file = await FileUploader.upload(path, file, schema);
|
|
|
|
inputElement.current.value = '';
|
|
setLoading(false);
|
|
onChange([...valuesArr(), file]);
|
|
} catch (error) {
|
|
inputElement.current.value = '';
|
|
console.log('error', error);
|
|
setLoading(false);
|
|
Errors.showMessage(error);
|
|
}
|
|
};
|
|
|
|
const formats = () => {
|
|
if (schema && schema.formats) {
|
|
return schema.formats.map((format) => `.${format}`).join(',');
|
|
}
|
|
return undefined;
|
|
};
|
|
|
|
const uploadButton = (
|
|
<label
|
|
className='btn btn-outline-secondary px-4 mb-2'
|
|
style={{ cursor: 'pointer' }}
|
|
>
|
|
{'Upload a file'}
|
|
<input
|
|
style={{ display: 'none' }}
|
|
disabled={loading || readonly}
|
|
accept={formats()}
|
|
type='file'
|
|
onChange={handleChange}
|
|
ref={inputElement}
|
|
/>
|
|
</label>
|
|
);
|
|
|
|
return (
|
|
<div>
|
|
{readonly || (max && fileList().length >= max) ? null : uploadButton}
|
|
|
|
{valuesArr() && valuesArr().length ? (
|
|
<div>
|
|
{valuesArr().map((item) => {
|
|
return (
|
|
<div key={item.id}>
|
|
<i className='la la-link text-muted mr-2'></i>
|
|
<a
|
|
href={item.publicUrl}
|
|
target='_blank'
|
|
rel='noopener noreferrer'
|
|
download
|
|
>
|
|
{item.name}
|
|
</a>
|
|
|
|
{!readonly && (
|
|
<button
|
|
className='btn btn-link'
|
|
type='button'
|
|
onClick={() => handleRemove(item.id)}
|
|
>
|
|
<i className='la la-times'></i>
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
FilesUploader.propTypes = {
|
|
readonly: PropTypes.bool,
|
|
path: PropTypes.string,
|
|
max: PropTypes.number,
|
|
schema: PropTypes.shape({
|
|
image: PropTypes.bool,
|
|
size: PropTypes.number,
|
|
formats: PropTypes.arrayOf(PropTypes.string),
|
|
}),
|
|
value: PropTypes.any,
|
|
onChange: PropTypes.func,
|
|
};
|
|
|
|
export default FilesUploader;
|