feat: add upload image payback

src/pages/Payback/PaybackFromUser.js

@@ -20,8 +20,10 @@ export const PaybackFromUser = observer(() => {
     const init = async () => {
       try {
         modalLoader.setLoading(true);
-        await store.payback.getDataUser();
+        await Promise.allSettled([
-        await store.authentication.getProfile();
+          store.payback.getDataUser(),
+          store.authentication.getProfile()
+        ]);
         modalLoader.setLoading(false);
       } catch (e) {
         modalLoader.setLoading(false);

src/pages/Payback/PaybackModal.js

@@ -1,37 +1,28 @@
-import React, {useState, useEffect, useContext} from "react";
+import React, {useContext, useState} from "react";
-import {
+import {Form, Input, message, Modal, Upload,} from "antd";
-  Button,
-  Form,
-  Image,
-  Input,
-  message,
-  Modal,
-  Upload,
-} from "antd";
 import {useStore} from "../../utils/useStore";
-import {appConfig} from "../../config/app";
+import {LoadingOutlined, PlusOutlined} from "@ant-design/icons";
-import {LoadingOutlined, UploadOutlined} 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 [previewVisible, setPreviewVisible] = useState(false);
-  const firstIndexFileList = fileList[0];
   const [loading, setLoading] = useState(false);
   const modalLoader = useContext(ModalLoaderContext);
 
   const beforeUpload = (file) => {
-    let isPdf, isLt2M;
+    let isLt2M;
-    let allowedFile = ["image/jpeg", "image/png", "application/pdf"];
+    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 uploadHandler = async (args) => {
-    const fileUrl = appConfig.apiUrl + file.response.path;
+    const file = args.file;
-    setPreviewTitle(file.url?.substring(file.url?.lastIndexOf("/") + 1));
+    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}) => {
+  const handleChange = (info) => {
-    setFileList(fileList);
+    if (info.file.status === 'uploading') {
-    if (fileList.length && fileList[0].status === "done") {
+      setLoading(true);
-      form.setFieldsValue({
+      return;
-        file_url: fileList[0].response.path,
-      });
-      console.log(fileList, "apaaaaaa");
-      setFileUrl(fileList[0].response.path);
-      setPreviewImage(fileList[0].response.path);
-      setPreviewTitle(fileList[0].name);
     }
+    setLoading(false)
   };
 
   const uploadButton = (
-    <div>
+      <div>
-      {loading ? (
+        {loading ? <LoadingOutlined/> : <PlusOutlined/>}
-        <LoadingOutlined/>
+        <div style={{marginTop: 8}}>Click to Upload</div>
-      ) : (
+      </div>
-        <Button icon={<UploadOutlined/>}>Click to Upload</Button>
-      )}
-    </div>
-  );
-
-  const previewUpload = (
-    <Image
-      className="w-full h-full"
-      preview={false}
-      src={!fileUrl ? null : `${appConfig.apiUrl}${fileUrl ?? ""}`}
-    />
   );
 
   const handleSubmit = async (data) => {
@@ -95,101 +77,85 @@ export const PaybackModal = ({visible, onCreate, onCancel, initialData}) => {
   };
 
   return (
-    <Modal
+      <Modal
-      visible={visible}
+          visible={visible}
-      title={"Create a new Payback"}
+          title={"Create a new Payback"}
-      okText={"Create"}
+          okText={"Create"}
-      cancelText="Cancel"
+          cancelText="Cancel"
-      onCancel={() => {
+          onCancel={() => {
-        form.resetFields();
-        onCancel();
-      }}
-      onOk={() => {
-        form
-          .validateFields()
-          .then((values) => {
-            handleSubmit(values);
-            console.log(values);
             form.resetFields();
-          })
+            onCancel();
-          .catch((info) => {
+          }}
-            console.log("Validate Failed:", info);
+          onOk={() => {
-          });
+            form
-      }}
+                .validateFields()
-    >
+                .then((values) => {
-      <Form
+                  handleSubmit(values);
-        form={form}
+                  console.log(values);
-        layout="vertical"
+                  form.resetFields();
-        name="form_in_modal"
+                })
-        initialValues={initialData}
+                .catch((info) => {
+                  console.log("Validate Failed:", info);
+                });
+          }}
       >
-        <Form.Item
+        <Form
-          name="destination"
+            form={form}
-          label="destination"
+            layout="vertical"
-          rules={[{required: true, message: "Please input Name!"}]}
+            name="form_in_modal"
-          initialValue={store.authentication.profileData.superior?.id}
+            initialValues={initialData}
         >
-          <Input/>
+          <Form.Item
-        </Form.Item>
+              name="destination"
-        <Form.Item
+              label="destination"
-          label="Upload Picture"
+              rules={[{required: true, message: "Please input Name!"}]}
-          name="image_prove"
+              initialValue={store.authentication.profileData.superior?.id}
-        >
+          >
-          <div
+            <Input/>
-            style={{
+          </Form.Item>
-              display: "flex",
+          <Form.Item
-              justifyContent: "space-between",
+              label="Upload Picture"
-              alignItems: "center",
+              name="image_prove"
-            }}
           >
             <div>
               <Upload
-                name="image_prove"
+                  listType="picture-card"
-                maxCount={1}
+                  fileList={fileList}
-                className="avatar-uploader"
+                  onPreview={(file) => {
-                // listType="picture-card"
+                    setPreviewImage(file.url || file.filename);
-                action={appConfig.apiUrl + "/files"}
+                    setPreviewVisible(file.url || file.filename);
-                fileList={fileList}
+                  }}
-                beforeUpload={beforeUpload}
+                  showUploadList={true}
-                onPreview={handlePreview}
+                  onChange={handleChange}
-                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={{
+                  style={{
-                  marginTop: 12,
+                    marginTop: 12,
-                  color: "rgba(0, 0, 0, 0.45)",
+                    color: "rgba(0, 0, 0, 0.45)",
-                }}
+                  }}
               >
                 Max size of file 2 mb
               </h5>
             </div>
-            <div>
+          </Form.Item>
-              <h5>Preview</h5>
+          <Form.Item
-              <div>
+              name="amount"
-                <img
+              label="amount"
-                  src={previewImage}
+              rules={[{required: true, message: "Please input Amount!"}]}
-                  alt="preview"
+          >
-                  style={{width: "100%"}}
+            <Input/>
-                />
+          </Form.Item>
-              </div>
+        </Form>
-              <h5>{previewTitle}</h5>
+      </Modal>
-              <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>
   );
 };

src/utils/http.js

@@ -50,13 +50,16 @@ export const http = {
         return req;
     },
     upload: (file) => {
-        const request = superagent
+        let req = superagent
-            .post(appConfig.apiUrl + '/files')
+            .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;