BOD-24 WIP for document previews for non images. Random cleanup included. #comment Current design for document previews may be bandwidth intensive. Proceeding with design to get v1 completed.

2020-03-17 16:50:21 -07:00
parent 5f7284d3a0
commit ec53663a1d
32 changed files with 491 additions and 384 deletions
--- a/client/src/components/documents-upload/documents-upload.component.jsx
+++ b/client/src/components/documents-upload/documents-upload.component.jsx
@@ -0,0 +1,19 @@
+import { UploadOutlined } from "@ant-design/icons";
+import { Button, Upload } from "antd";
+import React from "react";
+
+export default function DocumentsUploadComponent({ handleUpload }) {
+  return (
+    <div>
+      <Upload
+        multiple={true}
+        customRequest={handleUpload}
+        accept="audio/*,video/*,image/*"
+      >
+        <Button>
+          <UploadOutlined /> Click to Upload
+        </Button>
+      </Upload>
+    </div>
+  );
+}
--- a/client/src/components/documents-upload/documents-upload.container.jsx
+++ b/client/src/components/documents-upload/documents-upload.container.jsx
@@ -0,0 +1,143 @@
+import { notification } from "antd";
+import axios from "axios";
+import React from "react";
+import { useMutation } from "react-apollo";
+import { useTranslation } from "react-i18next";
+import Resizer from "react-image-file-resizer";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { INSERT_NEW_DOCUMENT } from "../../graphql/documents.queries";
+import {
+  selectBodyshop,
+  selectCurrentUser
+} from "../../redux/user/user.selectors";
+import { generateCdnThumb } from "../../utils/DocHelpers";
+import DocumentsUploadComponent from "./documents-upload.component";
+
+const mapStateToProps = createStructuredSelector({
+  currentUser: selectCurrentUser,
+  bodyshop: selectBodyshop
+});
+
+export default connect(
+  mapStateToProps,
+  null
+)(function DocumentsUploadContainer({
+  jobId,
+  invoiceId,
+  currentUser,
+  bodyshop,
+  callbackAfterUpload
+}) {
+  const { t } = useTranslation();
+  const [insertNewDocument] = useMutation(INSERT_NEW_DOCUMENT);
+
+  const handleUpload = ev => {
+    const { onError, onSuccess, onProgress } = ev;
+    //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 === "application/pdf") {
+      console.log("It's a PDF.");
+      uploadToS3(key, ev.file.type, ev.file, onError, onSuccess, onProgress);
+    } else {
+      Resizer.imageFileResizer(
+        ev.file,
+        3000,
+        3000,
+        "PNG",
+        75,
+        0,
+        uri => {
+          let file = new File([uri], ev.file.name, {});
+          file.uid = ev.file.uid;
+          uploadToS3(key, file.type, file, onError, onSuccess, onProgress);
+        },
+        "blob"
+      );
+    }
+  };
+  const uploadToS3 = (
+    fileName,
+    fileType,
+    file,
+    onError,
+    onSuccess,
+    onProgress
+  ) => {
+    axios
+      .post("/sign_s3", {
+        fileName,
+        fileType
+      })
+      .then(response => {
+        var returnData = response.data.data.returnData;
+        var signedRequest = returnData.signedRequest;
+        var url = returnData.url;
+        // setState({ ...state, url: url });
+        // Put the fileType in the headers for the upload
+        var options = {
+          headers: {
+            "Content-Type": fileType
+          },
+          onUploadProgress: e => {
+            onProgress({ percent: (e.loaded / e.total) * 100 });
+          }
+        };
+
+        axios
+          .put(signedRequest, file, options)
+          .then(response => {
+            insertNewDocument({
+              variables: {
+                docInput: [
+                  {
+                    jobid: jobId,
+                    uploaded_by: currentUser.email,
+                    url,
+                    thumb_url:
+                      fileType === "application/pdf"
+                        ? "application/pdf"
+                        : generateCdnThumb(fileName),
+                    key: fileName,
+                    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
+              });
+              notification["success"]({
+                message: t("documents.successes.insert")
+              });
+              if (callbackAfterUpload) {
+                callbackAfterUpload();
+              }
+            });
+          })
+          .catch(error => {
+            onError(error);
+            notification["error"]({
+              message: t("documents.errors.insert", {
+                message: JSON.stringify(error)
+              })
+            });
+          });
+      })
+      .catch(error => {
+        notification["error"]({
+          message: t("documents.errors.getpresignurl", {
+            message: JSON.stringify(error)
+          })
+        });
+      });
+  };
+  return <DocumentsUploadComponent handleUpload={handleUpload} />;
+});