Added Video support for document upload. IO-524

README.MD

@@ -12,7 +12,7 @@ To Start Hasura CLI:
 npx hasura console --admin-secret Dev-BodyShopAppBySnaptSoftware!
 
 Migrating to Staging:
-npx hasura migrate apply --up 10 --endpoint https://db.imex.online/ --admin-secret Production-ImEXOnline!@#
+npx hasura migrate apply --endpoint https://db.imex.online/ --admin-secret 'Production-ImEXOnline!@#'
 
 NGROK TEsting:
 
@@ -21,6 +21,6 @@ NGROK TEsting:
 Finding deadfiles - run from client directory
 npx deadfile ./src/index.js --exclude build templates
 
-cd client && yarn build && cd build && scp -r ** imex@prod-tor1.imex.online:~/bodyshop/client/build && cd .. &&cd ..
+cd client && yarn build && cd build && scp -r \*\* imex@prod-tor1.imex.online:~/bodyshop/client/build && cd .. &&cd ..
 
 gq https://bodyshop-dev-db.herokuapp.com/v1/graphql -H "X-Hasura-Admin-Secret: Dev-BodyShopAppBySnaptSoftware\!" --introspect > schema.graphql

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

@@ -1,5 +1,5 @@
 import { UploadOutlined } from "@ant-design/icons";
-import { Button, Upload } from "antd";
+import { Upload } from "antd";
 import React from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -50,11 +50,7 @@ export function DocumentsUploadComponent({
             <UploadOutlined />
           </p>
           <p className="ant-upload-text">
-            Click or drag file to this area to upload
+            Click or drag files to this area to upload.
-          </p>
-          <p className="ant-upload-hint">
-            Support for a single or bulk upload. Strictly prohibit from
-            uploading company data or other band files
           </p>
         </>
       )}

client/src/components/documents-upload/documents-upload.utility.js

@@ -93,9 +93,10 @@ export const uploadToCloudinary = async (
   formData.append("timestamp", timestamp);
   formData.append("signature", signature);
 
-  //Upload request to Cloudinary
   const cloudinaryUploadResponse = await cleanAxios.post(
-    `${process.env.REACT_APP_CLOUDINARY_ENDPOINT}/upload`,
+    `${process.env.REACT_APP_CLOUDINARY_ENDPOINT}/${DetermineFileType(
+      fileType
+    )}/upload`,
     formData,
     {
       ...options,
@@ -156,3 +157,13 @@ export const uploadToCloudinary = async (
     return;
   }
 };
+
+export function DetermineFileType(filetype) {
+  console.log("Checking Type", filetype, filetype.startsWith("video"));
+  if (!filetype) return "auto";
+  else if (filetype.startsWith("image")) return "image";
+  else if (filetype.startsWith("video")) return "video";
+  else if (filetype.startsWith("application/pdf")) return "image";
+
+  return "auto";
+}

client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx

@@ -23,30 +23,28 @@ function JobsDocumentsComponent({
         console.log("value", value);
         if (value.type.includes("image")) {
           acc.images.push({
-            src: `${
+            src: `${process.env.REACT_APP_CLOUDINARY_IMAGE_ENDPOINT}/${value.key}`,
-              value.type.startsWith("video")
+            thumbnail: `${process.env.REACT_APP_CLOUDINARY_IMAGE_ENDPOINT}/${process.env.REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS}/${value.key}`,
-                ? process.env.REACT_APP_CLOUDINARY_VIDEO_ENDPOINT
-                : process.env.REACT_APP_CLOUDINARY_IMAGE_ENDPOINT
-            }/${value.key}`,
-            thumbnail: `${
-              value.type.startsWith("video")
-                ? process.env.REACT_APP_CLOUDINARY_VIDEO_ENDPOINT
-                : process.env.REACT_APP_CLOUDINARY_IMAGE_ENDPOINT
-            }/${process.env.REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS}/${
-              value.key
-            }`,
             thumbnailHeight: 225,
             thumbnailWidth: 225,
             isSelected: false,
             key: value.key,
             id: value.id,
+            type: value.type,
+            tags: [{ value: value.type, title: value.type }],
           });
         } else {
           acc.other.push({
-            src: `${process.env.REACT_APP_CLOUDINARY_IMAGE_ENDPOINT}/${value.key}`,
+            src: `${
-            thumbnail: `${process.env.REACT_APP_CLOUDINARY_IMAGE_ENDPOINT}/${process.env.REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS}/${value.key}`,
+              value.type.startsWith("video")
+                ? process.env.REACT_APP_CLOUDINARY_VIDEO_ENDPOINT
+                : process.env.REACT_APP_CLOUDINARY_IMAGE_ENDPOINT
+            }/q_auto/${value.key}`,
+            thumbnail: value.type.startsWith("video")
+              ? `${process.env.REACT_APP_CLOUDINARY_VIDEO_ENDPOINT}/c_fill,f_png,h_250,w_250/${value.key}`
+              : `${process.env.REACT_APP_CLOUDINARY_IMAGE_ENDPOINT}/${process.env.REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS}/${value.key}`,
             tags: [
-              { value: "PDF", title: t("documents.labels.doctype") },
+              { value: value.type, title: value.type },
               ...(value.bill
                 ? [
                     {
@@ -66,6 +64,7 @@ function JobsDocumentsComponent({
             isSelected: false,
             key: value.key,
             id: value.id,
+            type: value.type,
           });
         }
 
@@ -91,6 +90,12 @@ function JobsDocumentsComponent({
           />
         </Space>
       </div>
+      <DocumentsUploadComponent
+        jobId={jobId}
+        billId={billId}
+        callbackAfterUpload={billsCallback || refetch}
+        tagsArray={["test"]}
+      ></DocumentsUploadComponent>
       <div style={{ marginTop: "2rem" }}>
         <Card title={t("jobs.labels.documents-images")}>
           <Gallery
@@ -112,12 +117,6 @@ function JobsDocumentsComponent({
               });
             }}
           />
-          <DocumentsUploadComponent
-            jobId={jobId}
-            billId={billId}
-            callbackAfterUpload={billsCallback || refetch}
-            tagsArray={["test"]}
-          ></DocumentsUploadComponent>
         </Card>
 
         <Card title={t("jobs.labels.documents-other")}>
@@ -141,12 +140,6 @@ function JobsDocumentsComponent({
               });
             }}
           />
-          <DocumentsUploadComponent
-            jobId={jobId}
-            billId={billId}
-            callbackAfterUpload={billsCallback || refetch}
-            tagsArray={["test"]}
-          ></DocumentsUploadComponent>
         </Card>
       </div>
     </div>

client/src/components/jobs-documents-gallery/jobs-documents-gallery.delete.component.jsx

@@ -7,6 +7,7 @@ import { useTranslation } from "react-i18next";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import { DELETE_DOCUMENT } from "../../graphql/documents.queries";
 import cleanAxios from "../../utils/CleanAxios";
+import { DetermineFileType } from "../documents-upload/documents-upload.utility";
 //Context: currentUserEmail, bodyshop, jobid, invoiceid
 
 export default function JobsDocumentsDeleteButton({
@@ -20,6 +21,7 @@ export default function JobsDocumentsDeleteButton({
     ...galleryImages.other.filter((image) => image.isSelected),
   ];
   const [loading, setLoading] = useState(false);
+
   const handleDelete = () => {
     logImEXEvent("job_documents_delete", { count: imagesToDelete.length });
     setLoading(true);
@@ -45,7 +47,9 @@ export default function JobsDocumentsDeleteButton({
 
           cleanAxios
             .post(
-              `${process.env.REACT_APP_CLOUDINARY_ENDPOINT}/destroy`,
+              `${process.env.REACT_APP_CLOUDINARY_ENDPOINT}/${DetermineFileType(
+                image.type
+              )}/destroy`,
               formData,
               options
             )