Added functional upload on invoice enter. BOD-75

2020-05-06 10:14:31 -07:00
parent 851527a907
commit 410d024db7
6 changed files with 234 additions and 152 deletions
--- a/client/src/components/documents-upload/documents-upload.utility.js
+++ b/client/src/components/documents-upload/documents-upload.utility.js
@@ -0,0 +1,161 @@
+import { notification } from "antd";
+import axios from "axios";
+import Resizer from "react-image-file-resizer";
+import { client } from "../../App/App.container";
+import { INSERT_NEW_DOCUMENT } from "../../graphql/documents.queries";
+import i18n from "i18next";
+
+//Context: currentUserEmail, bodyshop, jobid, invoiceid
+export const handleUpload = (ev, context) => {
+  console.log("ev", ev);
+  const { onError, onSuccess, onProgress } = ev;
+  const { bodyshop, jobId } = context;
+  //If PDF, upload directly.
+  //If JPEG, resize and upload.
+  //TODO If this is just an invoice job? Where to put it?
+  let key = `${bodyshop.id}/${jobId}/${ev.file.name}`;
+  if (ev.file.type.includes("image")) {
+    Resizer.imageFileResizer(
+      ev.file,
+      2500,
+      2500,
+      "JPEG",
+      75,
+      0,
+      (uri) => {
+        let file = new File([uri], ev.file.name, {});
+        file.uid = ev.file.uid;
+        uploadToS3(
+          key,
+          file.type,
+          file,
+          onError,
+          onSuccess,
+          onProgress,
+          context
+        );
+      },
+      "blob"
+    );
+  } else {
+    uploadToS3(
+      key,
+      ev.file.type,
+      ev.file,
+      onError,
+      onSuccess,
+      onProgress,
+      context
+    );
+  }
+};
+
+export const uploadToS3 = (
+  fileName,
+  fileType,
+  file,
+  onError,
+  onSuccess,
+  onProgress,
+  context
+) => {
+  const {
+    bodyshop,
+    jobId,
+    invoiceId,
+    uploaded_by,
+    callback,
+    tagsArray,
+  } = context;
+
+  let timestamp = Math.floor(Date.now() / 1000);
+  let public_id = fileName;
+  let tags = `${bodyshop.textid},${
+    tagsArray ? tagsArray.map((tag) => `${tag},`) : ""
+  }`;
+  let eager = process.env.REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS;
+  axios
+    .post("/media/sign", {
+      eager: eager,
+      public_id: public_id,
+      tags: tags,
+      timestamp: timestamp,
+    })
+    .then((response) => {
+      var signature = response.data;
+      var options = {
+        headers: { "X-Requested-With": "XMLHttpRequest" },
+        onUploadProgress: (e) => {
+          if (!!onProgress) onProgress({ percent: (e.loaded / e.total) * 100 });
+        },
+      };
+      const formData = new FormData();
+      formData.append("file", file);
+      formData.append("eager", eager);
+      formData.append("api_key", process.env.REACT_APP_CLOUDINARY_API_KEY);
+      formData.append("public_id", public_id);
+      formData.append("tags", tags);
+      formData.append("timestamp", timestamp);
+      formData.append("signature", signature);
+
+      axios
+        .post(
+          `${process.env.REACT_APP_CLOUDINARY_ENDPOINT}/upload`,
+          formData,
+          options
+        )
+        .then((response) => {
+          console.log("Upload Response", response);
+          client
+            .mutate({
+              mutation: INSERT_NEW_DOCUMENT,
+              variables: {
+                docInput: [
+                  {
+                    jobid: jobId,
+                    uploaded_by: uploaded_by,
+                    key: fileName,
+                    invoiceid: invoiceId,
+                    type: fileType,
+                  },
+                ],
+              },
+            })
+            .then((r) => {
+              if (!!onSuccess)
+                onSuccess({
+                  uid: r.data.insert_documents.returning[0].id,
+                  name: r.data.insert_documents.returning[0].name,
+                  status: "done",
+                  key: r.data.insert_documents.returning[0].key,
+                });
+              notification["success"]({
+                message: i18n.t("documents.successes.insert"),
+              });
+              if (callback) {
+                callback();
+              }
+              // if (onChange) {
+              //   //Used in a form.
+              //   onChange(UploadRef.current.state.fileList);
+              // }
+            });
+        })
+        .catch((error) => {
+          if (!!onError) onError(error);
+          notification["error"]({
+            message: i18n.t("documents.errors.insert", {
+              message: JSON.stringify(error),
+            }),
+          });
+        });
+    })
+    .catch((error) => {
+      console.log("error", error);
+      notification["error"]({
+        message: i18n.t("documents.errors.getpresignurl", {
+          message: JSON.stringify(error),
+        }),
+      });
+    });
+};