Added transformation on cloudinary side BOD-420

client/package.json

@@ -48,7 +48,6 @@
     "react-grid-layout": "^1.1.1",
     "react-i18next": "^11.7.3",
     "react-icons": "^3.11.0",
-    "react-image-file-resizer": "^0.3.8",
     "react-moment": "^0.9.7",
     "react-number-format": "^4.4.1",
     "react-redux": "^7.2.1",

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

@@ -1,13 +1,12 @@
 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";
+import { axiosAuthInterceptorId, client } from "../../App/App.container";
 import { logImEXEvent } from "../../firebase/firebase.utils";
-import { axiosAuthInterceptorId } from "../../App/App.container";
+import { INSERT_NEW_DOCUMENT } from "../../graphql/documents.queries";
 //Context: currentUserEmail, bodyshop, jobid, invoiceid
 
+//Required to prevent headers from getting set and rejected from Cloudinary.
 var cleanAxios = axios.create();
 cleanAxios.interceptors.request.eject(axiosAuthInterceptorId);
 
@@ -21,7 +20,7 @@ export const handleUpload = (ev, 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}`;
+  let key = `${bodyshop.id}/${jobId}/${ev.file.name.replace(/\.[^/.]+$/, "")}`;
   uploadToCloudinary(
     key,
     ev.file.type,
@@ -69,7 +68,7 @@ export const handleUpload = (ev, context) => {
 };
 
 export const uploadToCloudinary = async (
-  fileName,
+  key,
   fileType,
   file,
   onError,
@@ -81,7 +80,7 @@ export const uploadToCloudinary = async (
 
   //Set variables for getting the signed URL.
   let timestamp = Math.floor(Date.now() / 1000);
-  let public_id = fileName;
+  let public_id = key;
   let tags = `${bodyshop.textid},${
     tagsArray ? tagsArray.map((tag) => `${tag},`) : ""
   }`;
@@ -90,10 +89,11 @@ export const uploadToCloudinary = async (
   //Get the signed url.
 
   const signedURLResponse = await axios.post("/media/sign", {
-    eager: eager,
+    // eager: eager,
     public_id: public_id,
     tags: tags,
     timestamp: timestamp,
+    upload_preset: "incoming_upload",
   });
 
   if (signedURLResponse.status !== 200) {
@@ -117,7 +117,15 @@ export const uploadToCloudinary = async (
   };
   const formData = new FormData();
   formData.append("file", file);
-  formData.append("eager", eager);
+  //formData.append("eager", eager);
+  // if (fileType.includes("image")) {
+  console.log("Applying lower quality transforms.");
+  formData.append("upload_preset", "incoming_upload");
+  // formData.append("quality", "auto");
+  // formData.append("width", "500");
+  // formData.append("height", "500");
+  // formData.append("crop", "limit");
+  // }
   formData.append("api_key", process.env.REACT_APP_CLOUDINARY_API_KEY);
   formData.append("public_id", public_id);
   formData.append("tags", tags);
@@ -156,7 +164,7 @@ export const uploadToCloudinary = async (
         {
           jobid: jobId,
           uploaded_by: uploaded_by,
-          key: fileName,
+          key: key,
           billid: billId,
           type: fileType,
         },
@@ -186,8 +194,4 @@ export const uploadToCloudinary = async (
     });
     return;
   }
-  // if (onChange) {
-  //   //Used in a form.
-  //   onChange(UploadRef.current.state.fileList);
-  // }
 };

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

@@ -18,8 +18,8 @@ function JobsDocumentsComponent({
     setgalleryImages(
       data.reduce((acc, value) => {
         acc.push({
-          src: `${process.env.REACT_APP_CLOUDINARY_IMAGE_ENDPOINT}/${value.key}.jpg`,
-          thumbnail: `${process.env.REACT_APP_CLOUDINARY_IMAGE_ENDPOINT}/${process.env.REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS}/${value.key}.jpg`,
+          src: `${process.env.REACT_APP_CLOUDINARY_IMAGE_ENDPOINT}/${value.key}`,
+          thumbnail: `${process.env.REACT_APP_CLOUDINARY_IMAGE_ENDPOINT}/${process.env.REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS}/${value.key}`,
           tags: value.type.includes("pdf")
             ? [{ value: "PDF", title: "PDF" }]
             : [],

client/yarn.lock

@@ -11473,11 +11473,6 @@ react-icons@^3.11.0:
   dependencies:
     camelcase "^5.0.0"
 
-react-image-file-resizer@^0.3.8:
-  version "0.3.8"
-  resolved "https://registry.yarnpkg.com/react-image-file-resizer/-/react-image-file-resizer-0.3.8.tgz#c9ad58822f69432012f5e353933d4c11af26b034"
-  integrity sha512-54gA46Dmj2tSWuSGa0Gp6DBlur+MAnGh8q8eo/7hvh2bqoHmLo4mweJ4s0TUgANKllFAPD/5oLPK87M2AoOYTQ==
-
 react-images@^0.5.16:
   version "0.5.19"
   resolved "https://registry.yarnpkg.com/react-images/-/react-images-0.5.19.tgz#9339570029e065f9f28a19f03fdb5d9d5aa109d3"