74 lines
1.8 KiB
JavaScript
74 lines
1.8 KiB
JavaScript
import { UploadOutlined } from "@ant-design/icons";
|
|
import { Upload } from "antd";
|
|
import React, { useState } from "react";
|
|
|
|
import { connect } from "react-redux";
|
|
import { createStructuredSelector } from "reselect";
|
|
import {
|
|
selectBodyshop,
|
|
selectCurrentUser,
|
|
} from "../../redux/user/user.selectors";
|
|
import { handleUpload } from "./documents-local-upload.utility";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
currentUser: selectCurrentUser,
|
|
bodyshop: selectBodyshop,
|
|
});
|
|
|
|
export function DocumentsLocalUploadComponent({
|
|
children,
|
|
currentUser,
|
|
bodyshop,
|
|
job,
|
|
vendorid,
|
|
invoice_number,
|
|
callbackAfterUpload,
|
|
allowAllTypes,
|
|
}) {
|
|
const [fileList, setFileList] = useState([]);
|
|
|
|
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);
|
|
}}
|
|
customRequest={(ev) =>
|
|
handleUpload({
|
|
ev,
|
|
context: {
|
|
jobid: job.id,
|
|
vendorid,
|
|
invoice_number,
|
|
callback: callbackAfterUpload,
|
|
},
|
|
})
|
|
}
|
|
{...(!allowAllTypes && {
|
|
accept: "audio/*, video/*, image/*, .pdf, .doc, .docx, .xls, .xlsx",
|
|
})}
|
|
>
|
|
{children || (
|
|
<>
|
|
<p className="ant-upload-drag-icon">
|
|
<UploadOutlined />
|
|
</p>
|
|
<p className="ant-upload-text">
|
|
Click or drag files to this area to upload.
|
|
</p>
|
|
</>
|
|
)}
|
|
</Upload.Dragger>
|
|
);
|
|
}
|
|
export default connect(mapStateToProps, null)(DocumentsLocalUploadComponent);
|