:sparkles: 附件上传

dashboard/src/components/api/Attachments.ts

@@ -0,0 +1,18 @@
+/*
+            'name' => $filename,
+            'size' => $file->getSize(),
+            'type' => $file->getMimeType(),
+            'url' => $filename,
+*/
+export interface IAttachmentRequest {
+  uid: string;
+  name?: string;
+  size?: number;
+  type?: string;
+  url?: string;
+}
+export interface IAttachmentResponse {
+  ok: boolean;
+  message: string;
+  data: IAttachmentRequest;
+}

dashboard/src/components/template/Wbw/WbwDetail.tsx

@@ -10,6 +10,8 @@ import WbwDetailBookMark from "./WbwDetailBookMark";
 import WbwDetailNote from "./WbwDetailNote";
 import WbwDetailAdvance from "./WbwDetailAdvance";
 import { LockIcon, UnLockIcon } from "../../../assets/icon";
+import { UploadFile } from "antd/es/upload/interface";
+import { IAttachmentResponse } from "../../api/Attachments";
 
 interface IWidget {
   data: IWbw;
@@ -132,6 +134,19 @@ const Widget = ({ data, onClose, onSave }: IWidget) => {
                   onChange={(e: IWbwField) => {
                     fieldChanged(e.field, e.value);
                   }}
+                  onUpload={(fileList: UploadFile<IAttachmentResponse>[]) => {
+                    let mData = currWbwData;
+                    mData.attachments = fileList.map((item) => {
+                      return {
+                        uid: item.uid,
+                        name: item.name,
+                        size: item.size,
+                        type: item.type,
+                        url: item.response?.data.url,
+                      };
+                    });
+                    setCurrWbwData(mData);
+                  }}
                 />
               </div>
             ),

dashboard/src/components/template/Wbw/WbwDetailAdvance.tsx

@@ -1,4 +1,6 @@
 import { Input, Divider } from "antd";
+import { UploadFile } from "antd/es/upload/interface";
+import { IAttachmentResponse } from "../../api/Attachments";
 import WbwDetailUpload from "./WbwDetailUpload";
 
 import { IWbw } from "./WbwWord";
@@ -6,8 +8,9 @@ import { IWbw } from "./WbwWord";
 interface IWidget {
   data: IWbw;
   onChange?: Function;
+  onUpload?: Function;
 }
-const Widget = ({ data, onChange }: IWidget) => {
+const Widget = ({ data, onChange, onUpload }: IWidget) => {
   const onWordChange = (
     e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
   ) => {
@@ -43,7 +46,14 @@ const Widget = ({ data, onChange }: IWidget) => {
       <Divider>附件</Divider>
       <div></div>
       <div>
-        <WbwDetailUpload data={data} />
+        <WbwDetailUpload
+          data={data}
+          onUpload={(fileList: UploadFile<IAttachmentResponse>[]) => {
+            if (typeof onUpload !== "undefined") {
+              onUpload(fileList);
+            }
+          }}
+        />
       </div>
     </>
   );

dashboard/src/components/template/Wbw/WbwDetailUpload.tsx

@@ -2,33 +2,43 @@ import { useIntl } from "react-intl";
 import { UploadOutlined } from "@ant-design/icons";
 import type { UploadProps } from "antd";
 import { Button, message, Upload } from "antd";
+
 import { API_HOST } from "../../../request";
+import { get as getToken } from "../../../reducers/current-user";
 import { IWbw } from "./WbwWord";
 
 interface IWidget {
   data: IWbw;
-  onChange?: Function;
+  onUpload?: Function;
 }
-const Widget = ({ data, onChange }: IWidget) => {
+const Widget = ({ data, onUpload }: IWidget) => {
   const intl = useIntl();
 
   const props: UploadProps = {
     name: "file",
-    action: `${API_HOST}/api/v2/upload`,
+    action: `${API_HOST}/api/v2/attachments`,
     headers: {
-      authorization: "authorization-text",
+      Authorization: `Bearer ${getToken()}`,
     },
     defaultFileList: data.attachments,
     onChange(info) {
+      console.log("onchange", info);
+      if (typeof onUpload !== "undefined") {
+        onUpload(info.fileList);
+      }
       if (info.file.status !== "uploading") {
         console.log(info.file, info.fileList);
       }
       if (info.file.status === "done") {
         message.success(`${info.file.name} file uploaded successfully`);
+        console.log("file info", info);
       } else if (info.file.status === "error") {
         message.error(`${info.file.name} file upload failed.`);
       }
     },
+    onRemove(file) {
+      console.log("remove", file);
+    },
   };
 
   return (