Enable video upload. IO-524

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

@@ -1,9 +1,9 @@
 import { notification } from "antd";
 import axios from "axios";
 import i18n from "i18next";
-import { axiosAuthInterceptorId } from "../../utils/CleanAxios";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import { INSERT_NEW_DOCUMENT } from "../../graphql/documents.queries";
+import { axiosAuthInterceptorId } from "../../utils/CleanAxios";
 import client from "../../utils/GraphQLClient";
 //Context: currentUserEmail, bodyshop, jobid, invoiceid
 
@@ -51,12 +51,16 @@ export const uploadToCloudinary = async (
   //  let eager = process.env.REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS;
 
   //Get the signed url.
+  console.log("fileType", fileType);
+  const upload_preset = fileType.startsWith("video")
+    ? "incoming_upload_video"
+    : "incoming_upload";
 
   const signedURLResponse = await axios.post("/media/sign", {
     public_id: public_id,
     tags: tags,
     timestamp: timestamp,
-    upload_preset: "incoming_upload",
+    upload_preset: upload_preset,
   });
 
   if (signedURLResponse.status !== 200) {
@@ -80,8 +84,8 @@ export const uploadToCloudinary = async (
   };
   const formData = new FormData();
   formData.append("file", file);
-  console.log("Applying lower quality transforms.");
+
-  formData.append("upload_preset", "incoming_upload");
+  formData.append("upload_preset", upload_preset);
 
   formData.append("api_key", process.env.REACT_APP_CLOUDINARY_API_KEY);
   formData.append("public_id", public_id);
@@ -146,7 +150,7 @@ export const uploadToCloudinary = async (
     if (!!onError) onError(JSON.stringify(documentInsert.errors));
     notification["error"]({
       message: i18n.t("documents.errors.insert", {
-        message: JSON.stringify(JSON.stringify(documentInsert.errors)),
+        message: JSON.stringify(documentInsert.errors),
       }),
     });
     return;

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

@@ -16,13 +16,25 @@ function JobsDocumentsComponent({
 }) {
   const [galleryImages, setgalleryImages] = useState({ images: [], other: [] });
   const { t } = useTranslation();
+
   useEffect(() => {
     let documents = data.reduce(
       (acc, value) => {
+        console.log("value", value);
         if (value.type.includes("image")) {
           acc.images.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
+            }/${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,
@@ -81,12 +93,6 @@ function JobsDocumentsComponent({
       </div>
       <div style={{ marginTop: "2rem" }}>
         <Card title={t("jobs.labels.documents-images")}>
-          <DocumentsUploadComponent
-            jobId={jobId}
-            billId={billId}
-            callbackAfterUpload={billsCallback || refetch}
-            tagsArray={["test"]}
-          >
           <Gallery
             images={galleryImages.images}
             backdropClosesModal={true}
@@ -106,16 +112,15 @@ function JobsDocumentsComponent({
               });
             }}
           />
-          </DocumentsUploadComponent>
-        </Card>
-
-        <Card title={t("jobs.labels.documents-other")}>
           <DocumentsUploadComponent
             jobId={jobId}
             billId={billId}
             callbackAfterUpload={billsCallback || refetch}
             tagsArray={["test"]}
-          >
+          ></DocumentsUploadComponent>
+        </Card>
+
+        <Card title={t("jobs.labels.documents-other")}>
           <Gallery
             images={galleryImages.other}
             backdropClosesModal={true}
@@ -136,7 +141,12 @@ function JobsDocumentsComponent({
               });
             }}
           />
-          </DocumentsUploadComponent>
+          <DocumentsUploadComponent
+            jobId={jobId}
+            billId={billId}
+            callbackAfterUpload={billsCallback || refetch}
+            tagsArray={["test"]}
+          ></DocumentsUploadComponent>
         </Card>
       </div>
     </div>