112 lines
3.4 KiB
JavaScript
112 lines
3.4 KiB
JavaScript
import { UploadOutlined } from "@ant-design/icons";
|
|
import { notification, Progress, Result, Space, Upload } from "antd";
|
|
import React, { useMemo, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { connect } from "react-redux";
|
|
import { createStructuredSelector } from "reselect";
|
|
import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
|
|
import formatBytes from "../../utils/formatbytes";
|
|
import { handleUpload } from "./documents-upload.utility";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
currentUser: selectCurrentUser,
|
|
bodyshop: selectBodyshop
|
|
});
|
|
|
|
export function DocumentsUploadComponent({
|
|
children,
|
|
currentUser,
|
|
bodyshop,
|
|
jobId,
|
|
tagsArray,
|
|
billId,
|
|
callbackAfterUpload,
|
|
totalSize,
|
|
ignoreSizeLimit = false
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const [fileList, setFileList] = useState([]);
|
|
|
|
const pct = useMemo(() => {
|
|
return parseInt((totalSize / ((bodyshop && bodyshop.jobsizelimit) || 1)) * 100);
|
|
}, [bodyshop, totalSize]);
|
|
|
|
if (pct > 100 && !ignoreSizeLimit)
|
|
return (
|
|
<Result
|
|
status="error"
|
|
title={t("documents.labels.storageexceeded_title")}
|
|
subTitle={t("documents.labels.storageexceeded")}
|
|
/>
|
|
);
|
|
|
|
const handleDone = (uid) => {
|
|
setTimeout(() => {
|
|
setFileList((fileList) => fileList.filter((x) => x.uid !== uid));
|
|
}, 2000);
|
|
};
|
|
|
|
return (
|
|
<Upload.Dragger
|
|
multiple={true}
|
|
fileList={fileList}
|
|
onChange={(f) => {
|
|
if (f.event && f.event.percent === 100) handleDone(f.file.uid);
|
|
setFileList(f.fileList);
|
|
}}
|
|
beforeUpload={(file, fileList) => {
|
|
if (ignoreSizeLimit) return true;
|
|
const newFiles = fileList.reduce((acc, val) => acc + val.size, 0);
|
|
const shouldStopUpload = (totalSize + newFiles) / ((bodyshop && bodyshop.jobsizelimit) || 1) >= 1;
|
|
|
|
//Check to see if old files plus newly uploaded ones will be too much.
|
|
if (shouldStopUpload) {
|
|
notification.open({
|
|
key: "cannotuploaddocuments",
|
|
type: "error",
|
|
message: t("documents.labels.upload_limitexceeded_title"),
|
|
description: t("documents.labels.upload_limitexceeded")
|
|
});
|
|
return Upload.LIST_IGNORE;
|
|
}
|
|
return true;
|
|
}}
|
|
customRequest={(ev) =>
|
|
handleUpload(ev, {
|
|
bodyshop: bodyshop,
|
|
uploaded_by: currentUser.email,
|
|
jobId: jobId,
|
|
billId: billId,
|
|
tagsArray: tagsArray,
|
|
callback: callbackAfterUpload
|
|
})
|
|
}
|
|
accept="audio/*, video/*, image/*, .pdf, .doc, .docx, .xls, .xlsx"
|
|
// showUploadList={false}
|
|
>
|
|
{children || (
|
|
<>
|
|
<p className="ant-upload-drag-icon">
|
|
<UploadOutlined />
|
|
</p>
|
|
<p className="ant-upload-text">Click or drag files to this area to upload.</p>
|
|
{!ignoreSizeLimit && (
|
|
<Space wrap className="ant-upload-text">
|
|
<Progress type="dashboard" percent={pct} size="small" />
|
|
<span>
|
|
{t("documents.labels.usage", {
|
|
percent: pct,
|
|
used: formatBytes(totalSize),
|
|
total: formatBytes(bodyshop && bodyshop.jobsizelimit)
|
|
})}
|
|
</span>
|
|
</Space>
|
|
)}
|
|
</>
|
|
)}
|
|
</Upload.Dragger>
|
|
);
|
|
}
|
|
|
|
export default connect(mapStateToProps, null)(DocumentsUploadComponent);
|