124 lines
4.0 KiB
JavaScript
124 lines
4.0 KiB
JavaScript
import { UploadOutlined } from "@ant-design/icons";
|
|
import { Progress, Result, Space, Upload } from "antd";
|
|
import { useMemo, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { connect } from "react-redux";
|
|
import { createStructuredSelector } from "reselect";
|
|
import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
|
|
import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
|
|
import formatBytes from "../../utils/formatbytes";
|
|
import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
|
|
import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
|
|
import { handleUpload } from "./documents-upload-imgproxy.utility.js";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
currentUser: selectCurrentUser,
|
|
bodyshop: selectBodyshop
|
|
});
|
|
|
|
export function DocumentsUploadImgproxyComponent({
|
|
children,
|
|
currentUser,
|
|
bodyshop,
|
|
jobId,
|
|
tagsArray,
|
|
billId,
|
|
callbackAfterUpload,
|
|
totalSize,
|
|
ignoreSizeLimit = false
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const [fileList, setFileList] = useState([]);
|
|
const notification = useNotification();
|
|
|
|
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);
|
|
};
|
|
const hasMediaAccess = HasFeatureAccess({ bodyshop, featureName: "media" });
|
|
|
|
return (
|
|
<Upload.Dragger
|
|
multiple={true}
|
|
fileList={fileList}
|
|
disabled={!hasMediaAccess}
|
|
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
|
|
},
|
|
notification
|
|
)
|
|
}
|
|
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">
|
|
<LockWrapperComponent featureName="media">{t("documents.labels.dragtoupload")}</LockWrapperComponent>
|
|
</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)(DocumentsUploadImgproxyComponent);
|