WIP for document upload on invoice enter.

client/src/components/documents-upload/documents-upload.component.jsx

@@ -2,13 +2,14 @@ import { UploadOutlined } from "@ant-design/icons";
 import { Button, Upload } from "antd";
 import React from "react";
 
-export default function DocumentsUploadComponent({ handleUpload }) {
+export default function DocumentsUploadComponent({ handleUpload, UploadRef }) {
   return (
     <div>
       <Upload
         multiple={true}
         customRequest={handleUpload}
         accept="audio/*,video/*,image/*"
+        ref={UploadRef}
       >
         <Button>
           <UploadOutlined /> Click to Upload

client/src/components/documents-upload/documents-upload.container.jsx

@@ -1,6 +1,6 @@
 import { notification } from "antd";
 import axios from "axios";
-import React from "react";
+import React, { useRef } from "react";
 import { useMutation } from "@apollo/react-hooks";
 import { useTranslation } from "react-i18next";
 import Resizer from "react-image-file-resizer";
@@ -9,30 +9,29 @@ import { createStructuredSelector } from "reselect";
 import { INSERT_NEW_DOCUMENT } from "../../graphql/documents.queries";
 import {
   selectBodyshop,
-  selectCurrentUser
+  selectCurrentUser,
 } from "../../redux/user/user.selectors";
 import { generateCdnThumb } from "../../utils/DocHelpers";
 import DocumentsUploadComponent from "./documents-upload.component";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
-  bodyshop: selectBodyshop
+  bodyshop: selectBodyshop,
 });
 
-export default connect(
-  mapStateToProps,
-  null
-)(function DocumentsUploadContainer({
+export function DocumentsUploadContainer({
   jobId,
   invoiceId,
   currentUser,
   bodyshop,
-  callbackAfterUpload
+  callbackAfterUpload,
+  onChange,
 }) {
   const { t } = useTranslation();
   const [insertNewDocument] = useMutation(INSERT_NEW_DOCUMENT);
+  const UploadRef = useRef(null);
 
-  const handleUpload = ev => {
+  const handleUpload = (ev) => {
     const { onError, onSuccess, onProgress } = ev;
     //If PDF, upload directly.
     //If JPEG, resize and upload.
@@ -49,7 +48,7 @@ export default connect(
         "PNG",
         75,
         0,
-        uri => {
+        (uri) => {
           let file = new File([uri], ev.file.name, {});
           file.uid = ev.file.uid;
           uploadToS3(key, file.type, file, onError, onSuccess, onProgress);
@@ -69,9 +68,9 @@ export default connect(
     axios
       .post("/sign_s3", {
         fileName,
-        fileType
+        fileType,
       })
-      .then(response => {
+      .then((response) => {
         var returnData = response.data.data.returnData;
         var signedRequest = returnData.signedRequest;
         var url = returnData.url;
@@ -79,16 +78,16 @@ export default connect(
         // Put the fileType in the headers for the upload
         var options = {
           headers: {
-            "Content-Type": fileType
+            "Content-Type": fileType,
           },
-          onUploadProgress: e => {
+          onUploadProgress: (e) => {
             onProgress({ percent: (e.loaded / e.total) * 100 });
-          }
+          },
         };
 
         axios
           .put(signedRequest, file, options)
-          .then(response => {
+          .then((response) => {
             insertNewDocument({
               variables: {
                 docInput: [
@@ -101,43 +100,55 @@ export default connect(
                         ? "application/pdf"
                         : generateCdnThumb(fileName),
                     key: fileName,
-                    invoiceid: invoiceId
-                  }
-                ]
-              }
-            }).then(r => {
+                    invoiceid: invoiceId,
+                  },
+                ],
+              },
+            }).then((r) => {
               onSuccess({
                 uid: r.data.insert_documents.returning[0].id,
                 url: r.data.insert_documents.returning[0].thumb_url,
                 name: r.data.insert_documents.returning[0].name,
                 status: "done",
                 full_url: r.data.insert_documents.returning[0].url,
-                key: r.data.insert_documents.returning[0].key
+                key: r.data.insert_documents.returning[0].key,
               });
               notification["success"]({
-                message: t("documents.successes.insert")
+                message: t("documents.successes.insert"),
               });
               if (callbackAfterUpload) {
                 callbackAfterUpload();
               }
+              console.log("ref", UploadRef.current.state.fileList);
+              if (onChange) {
+                //Used in a form.
+                onChange(UploadRef.current.state.fileList);
+              }
             });
           })
-          .catch(error => {
+          .catch((error) => {
             onError(error);
             notification["error"]({
               message: t("documents.errors.insert", {
-                message: JSON.stringify(error)
-              })
+                message: JSON.stringify(error),
+              }),
             });
           });
       })
-      .catch(error => {
+      .catch((error) => {
         notification["error"]({
           message: t("documents.errors.getpresignurl", {
-            message: JSON.stringify(error)
-          })
+            message: JSON.stringify(error),
+          }),
         });
       });
   };
-  return <DocumentsUploadComponent handleUpload={handleUpload} />;
-});
+  return (
+    <DocumentsUploadComponent
+      handleUpload={handleUpload}
+      UploadRef={UploadRef}
+    />
+  );
+}
+
+export default connect(mapStateToProps, null)(DocumentsUploadContainer);