From e2c3d7f4def713057014e2679f496622bfb51120 Mon Sep 17 00:00:00 2001 From: Patrick Fic <> Date: Thu, 1 Oct 2020 11:42:40 -0700 Subject: [PATCH] Added transformation on cloudinary side BOD-420 --- client/package.json | 1 - .../documents-upload.utility.js | 32 +++++++++++-------- .../jobs-documents-gallery.component.jsx | 4 +-- client/yarn.lock | 5 --- 4 files changed, 20 insertions(+), 22 deletions(-) diff --git a/client/package.json b/client/package.json index 8d163c813..b2bf854fe 100644 --- a/client/package.json +++ b/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", diff --git a/client/src/components/documents-upload/documents-upload.utility.js b/client/src/components/documents-upload/documents-upload.utility.js index c5e43831b..3e6a1627d 100644 --- a/client/src/components/documents-upload/documents-upload.utility.js +++ b/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); - // } }; diff --git a/client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx b/client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx index edc7190bb..5783bd15e 100644 --- a/client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx +++ b/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" }] : [], diff --git a/client/yarn.lock b/client/yarn.lock index 5a8486f7a..337a79389 100644 --- a/client/yarn.lock +++ b/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"