Added transformation on cloudinary side BOD-420

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);
-  // }
 };