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,62 +93,60 @@ function JobsDocumentsComponent({
       </div>
       <div style={{ marginTop: "2rem" }}>
         <Card title={t("jobs.labels.documents-images")}>
+          <Gallery
+            images={galleryImages.images}
+            backdropClosesModal={true}
+            onClickImage={(props) => {
+              window.open(
+                props.target.src,
+                "_blank",
+                "toolbar=0,location=0,menubar=0"
+              );
+            }}
+            onSelectImage={(index, image) => {
+              setgalleryImages({
+                ...galleryImages,
+                images: galleryImages.images.map((g, idx) =>
+                  index === idx ? { ...g, isSelected: !g.isSelected } : g
+                ),
+              });
+            }}
+          />
           <DocumentsUploadComponent
             jobId={jobId}
             billId={billId}
             callbackAfterUpload={billsCallback || refetch}
             tagsArray={["test"]}
-          >
+          ></DocumentsUploadComponent>
-            <Gallery
-              images={galleryImages.images}
-              backdropClosesModal={true}
-              onClickImage={(props) => {
-                window.open(
-                  props.target.src,
-                  "_blank",
-                  "toolbar=0,location=0,menubar=0"
-                );
-              }}
-              onSelectImage={(index, image) => {
-                setgalleryImages({
-                  ...galleryImages,
-                  images: galleryImages.images.map((g, idx) =>
-                    index === idx ? { ...g, isSelected: !g.isSelected } : g
-                  ),
-                });
-              }}
-            />
-          </DocumentsUploadComponent>
         </Card>
 
         <Card title={t("jobs.labels.documents-other")}>
+          <Gallery
+            images={galleryImages.other}
+            backdropClosesModal={true}
+            enableLightbox={false}
+            onClickThumbnail={(index) => {
+              window.open(
+                galleryImages.other[index].src,
+                "_blank",
+                "toolbar=0,location=0,menubar=0"
+              );
+            }}
+            onSelectImage={(index) => {
+              setgalleryImages({
+                ...galleryImages,
+                other: galleryImages.other.map((g, idx) =>
+                  index === idx ? { ...g, isSelected: !g.isSelected } : g
+                ),
+              });
+            }}
+          />
           <DocumentsUploadComponent
             jobId={jobId}
             billId={billId}
             callbackAfterUpload={billsCallback || refetch}
             tagsArray={["test"]}
-          >
+          ></DocumentsUploadComponent>
-            <Gallery
-              images={galleryImages.other}
-              backdropClosesModal={true}
-              enableLightbox={false}
-              onClickThumbnail={(index) => {
-                window.open(
-                  galleryImages.other[index].src,
-                  "_blank",
-                  "toolbar=0,location=0,menubar=0"
-                );
-              }}
-              onSelectImage={(index) => {
-                setgalleryImages({
-                  ...galleryImages,
-                  other: galleryImages.other.map((g, idx) =>
-                    index === idx ? { ...g, isSelected: !g.isSelected } : g
-                  ),
-                });
-              }}
-            />
-          </DocumentsUploadComponent>
         </Card>
       </div>
     </div>