feat: add upload image payback
This commit is contained in:
caturbgs
parent
89b890c888
commit
a4ba756dbc
|
|
@ -20,8 +20,10 @@ export const PaybackFromUser = observer(() => {
|
|||
const init = async () => {
|
||||
try {
|
||||
modalLoader.setLoading(true);
|
||||
await store.payback.getDataUser();
|
||||
await store.authentication.getProfile();
|
||||
await Promise.allSettled([
|
||||
store.payback.getDataUser(),
|
||||
store.authentication.getProfile()
|
||||
]);
|
||||
modalLoader.setLoading(false);
|
||||
} catch (e) {
|
||||
modalLoader.setLoading(false);
|
||||
|
|
|
|||
|
|
@ -1,37 +1,28 @@
|
|||
import React, {useState, useEffect, useContext} from "react";
|
||||
import {
|
||||
Button,
|
||||
Form,
|
||||
Image,
|
||||
Input,
|
||||
message,
|
||||
Modal,
|
||||
Upload,
|
||||
} from "antd";
|
||||
import React, {useContext, useState} from "react";
|
||||
import {Form, Input, message, Modal, Upload,} from "antd";
|
||||
import {useStore} from "../../utils/useStore";
|
||||
import {appConfig} from "../../config/app";
|
||||
import {LoadingOutlined, UploadOutlined} from "@ant-design/icons";
|
||||
import {LoadingOutlined, PlusOutlined} from "@ant-design/icons";
|
||||
import {ModalLoaderContext} from "../../utils/modal";
|
||||
import {http} from "../../utils/http";
|
||||
import {appConfig} from "../../config/app";
|
||||
|
||||
export const PaybackModal = ({visible, onCreate, onCancel, initialData}) => {
|
||||
const [form] = Form.useForm();
|
||||
const store = useStore();
|
||||
const [image, setImage] = useState("");
|
||||
const [fileList, setFileList] = useState([]);
|
||||
const [previewTitle, setPreviewTitle] = useState("");
|
||||
const [previewImage, setPreviewImage] = useState("");
|
||||
const [fileUrl, setFileUrl] = useState("");
|
||||
const firstIndexFileList = fileList[0];
|
||||
const [previewVisible, setPreviewVisible] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const modalLoader = useContext(ModalLoaderContext);
|
||||
|
||||
const beforeUpload = (file) => {
|
||||
let isPdf, isLt2M;
|
||||
let allowedFile = ["image/jpeg", "image/png", "application/pdf"];
|
||||
let isLt2M;
|
||||
let allowedFile = ["image/jpeg", "image/png"];
|
||||
let isValid = allowedFile.includes(file.type);
|
||||
if (!isValid) {
|
||||
message.error("You can only upload PDF or Image file!");
|
||||
message.error("You can only upload Image file!");
|
||||
}
|
||||
// return file.type === 'application/pdf' ? true : Upload.LIST_IGNORE;
|
||||
isLt2M = file.size / 1024 / 1024 < 2;
|
||||
if (!isLt2M) {
|
||||
message.error("File must smaller than 2MB!");
|
||||
|
|
@ -39,40 +30,31 @@ export const PaybackModal = ({visible, onCreate, onCancel, initialData}) => {
|
|||
return isValid && isLt2M ? true : Upload.LIST_IGNORE;
|
||||
};
|
||||
|
||||
const handlePreview = async (file) => {
|
||||
const fileUrl = appConfig.apiUrl + file.response.path;
|
||||
setPreviewTitle(file.url?.substring(file.url?.lastIndexOf("/") + 1));
|
||||
const uploadHandler = async (args) => {
|
||||
const file = args.file;
|
||||
const res = await http.upload(file);
|
||||
setImage(`${appConfig.apiUrl}/config/image/${res.body.filename}`);
|
||||
setFileList([{
|
||||
uid: '-1',
|
||||
name: 'image',
|
||||
status: 'done',
|
||||
url: `${appConfig.apiUrl}/config/image/${res.body.filename}`,
|
||||
}]);
|
||||
};
|
||||
|
||||
const handleChange = ({fileList}) => {
|
||||
setFileList(fileList);
|
||||
if (fileList.length && fileList[0].status === "done") {
|
||||
form.setFieldsValue({
|
||||
file_url: fileList[0].response.path,
|
||||
});
|
||||
console.log(fileList, "apaaaaaa");
|
||||
setFileUrl(fileList[0].response.path);
|
||||
setPreviewImage(fileList[0].response.path);
|
||||
setPreviewTitle(fileList[0].name);
|
||||
const handleChange = (info) => {
|
||||
if (info.file.status === 'uploading') {
|
||||
setLoading(true);
|
||||
return;
|
||||
}
|
||||
setLoading(false)
|
||||
};
|
||||
|
||||
const uploadButton = (
|
||||
<div>
|
||||
{loading ? (
|
||||
<LoadingOutlined/>
|
||||
) : (
|
||||
<Button icon={<UploadOutlined/>}>Click to Upload</Button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
const previewUpload = (
|
||||
<Image
|
||||
className="w-full h-full"
|
||||
preview={false}
|
||||
src={!fileUrl ? null : `${appConfig.apiUrl}${fileUrl ?? ""}`}
|
||||
/>
|
||||
<div>
|
||||
{loading ? <LoadingOutlined/> : <PlusOutlined/>}
|
||||
<div style={{marginTop: 8}}>Click to Upload</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const handleSubmit = async (data) => {
|
||||
|
|
@ -95,101 +77,85 @@ export const PaybackModal = ({visible, onCreate, onCancel, initialData}) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
visible={visible}
|
||||
title={"Create a new Payback"}
|
||||
okText={"Create"}
|
||||
cancelText="Cancel"
|
||||
onCancel={() => {
|
||||
form.resetFields();
|
||||
onCancel();
|
||||
}}
|
||||
onOk={() => {
|
||||
form
|
||||
.validateFields()
|
||||
.then((values) => {
|
||||
handleSubmit(values);
|
||||
console.log(values);
|
||||
<Modal
|
||||
visible={visible}
|
||||
title={"Create a new Payback"}
|
||||
okText={"Create"}
|
||||
cancelText="Cancel"
|
||||
onCancel={() => {
|
||||
form.resetFields();
|
||||
})
|
||||
.catch((info) => {
|
||||
console.log("Validate Failed:", info);
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
name="form_in_modal"
|
||||
initialValues={initialData}
|
||||
onCancel();
|
||||
}}
|
||||
onOk={() => {
|
||||
form
|
||||
.validateFields()
|
||||
.then((values) => {
|
||||
handleSubmit(values);
|
||||
console.log(values);
|
||||
form.resetFields();
|
||||
})
|
||||
.catch((info) => {
|
||||
console.log("Validate Failed:", info);
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Form.Item
|
||||
name="destination"
|
||||
label="destination"
|
||||
rules={[{required: true, message: "Please input Name!"}]}
|
||||
initialValue={store.authentication.profileData.superior?.id}
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
name="form_in_modal"
|
||||
initialValues={initialData}
|
||||
>
|
||||
<Input/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="Upload Picture"
|
||||
name="image_prove"
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
}}
|
||||
<Form.Item
|
||||
name="destination"
|
||||
label="destination"
|
||||
rules={[{required: true, message: "Please input Name!"}]}
|
||||
initialValue={store.authentication.profileData.superior?.id}
|
||||
>
|
||||
<Input/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="Upload Picture"
|
||||
name="image_prove"
|
||||
>
|
||||
<div>
|
||||
<Upload
|
||||
name="image_prove"
|
||||
maxCount={1}
|
||||
className="avatar-uploader"
|
||||
// listType="picture-card"
|
||||
action={appConfig.apiUrl + "/files"}
|
||||
fileList={fileList}
|
||||
beforeUpload={beforeUpload}
|
||||
onPreview={handlePreview}
|
||||
onChange={handleChange}
|
||||
listType="picture-card"
|
||||
fileList={fileList}
|
||||
onPreview={(file) => {
|
||||
setPreviewImage(file.url || file.filename);
|
||||
setPreviewVisible(file.url || file.filename);
|
||||
}}
|
||||
showUploadList={true}
|
||||
onChange={handleChange}
|
||||
beforeUpload={(file) => beforeUpload(file)}
|
||||
customRequest={(args) => uploadHandler(args)}
|
||||
onRemove={(file) => {
|
||||
setImage('');
|
||||
setLoading(false);
|
||||
setFileList([]);
|
||||
}}
|
||||
>
|
||||
{!firstIndexFileList ? uploadButton : null}
|
||||
|
||||
{image === "" ? uploadButton : null}
|
||||
</Upload>
|
||||
<h5
|
||||
style={{
|
||||
marginTop: 12,
|
||||
color: "rgba(0, 0, 0, 0.45)",
|
||||
}}
|
||||
style={{
|
||||
marginTop: 12,
|
||||
color: "rgba(0, 0, 0, 0.45)",
|
||||
}}
|
||||
>
|
||||
Max size of file 2 mb
|
||||
</h5>
|
||||
</div>
|
||||
<div>
|
||||
<h5>Preview</h5>
|
||||
<div>
|
||||
<img
|
||||
src={previewImage}
|
||||
alt="preview"
|
||||
style={{width: "100%"}}
|
||||
/>
|
||||
</div>
|
||||
<h5>{previewTitle}</h5>
|
||||
<h5>
|
||||
{previewUpload}
|
||||
{previewTitle && <span>{`${previewTitle ?? ""}`}</span>}
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="amount"
|
||||
label="amount"
|
||||
rules={[{required: true, message: "Please input Amount!"}]}
|
||||
>
|
||||
<Input/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="amount"
|
||||
label="amount"
|
||||
rules={[{required: true, message: "Please input Amount!"}]}
|
||||
>
|
||||
<Input/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -50,13 +50,16 @@ export const http = {
|
|||
return req;
|
||||
},
|
||||
upload: (file) => {
|
||||
const request = superagent
|
||||
.post(appConfig.apiUrl + '/files')
|
||||
let req = superagent
|
||||
.post(appConfig.apiUrl + '/config/upload-files')
|
||||
.attach('file', file)
|
||||
.use(authIntercept)
|
||||
.use(attachSuperagentLogger);
|
||||
if (TokenUtil.accessToken) {
|
||||
req = req.set('Authorization', 'Bearer ' + TokenUtil.accessToken);
|
||||
}
|
||||
|
||||
return request;
|
||||
return req;
|
||||
},
|
||||
uploadAntd: (args) => {
|
||||
const file = args.file;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user