From 6e33b5fd6b41dea94419a5bf9c4710e8521252e5 Mon Sep 17 00:00:00 2001 From: Patrick Fic <> Date: Thu, 4 Feb 2021 14:15:16 -0800 Subject: [PATCH] Added Video support for document upload. IO-524 --- README.MD | 4 +- .../documents-upload.component.jsx | 8 +--- .../documents-upload.utility.js | 15 +++++- .../jobs-documents-gallery.component.jsx | 47 ++++++++----------- ...obs-documents-gallery.delete.component.jsx | 6 ++- 5 files changed, 42 insertions(+), 38 deletions(-) diff --git a/README.MD b/README.MD index ec581daaa..1b160524b 100644 --- a/README.MD +++ b/README.MD @@ -12,7 +12,7 @@ To Start Hasura CLI: npx hasura console --admin-secret Dev-BodyShopAppBySnaptSoftware! Migrating to Staging: -npx hasura migrate apply --up 10 --endpoint https://db.imex.online/ --admin-secret Production-ImEXOnline!@# +npx hasura migrate apply --endpoint https://db.imex.online/ --admin-secret 'Production-ImEXOnline!@#' NGROK TEsting: @@ -21,6 +21,6 @@ NGROK TEsting: Finding deadfiles - run from client directory npx deadfile ./src/index.js --exclude build templates -cd client && yarn build && cd build && scp -r ** imex@prod-tor1.imex.online:~/bodyshop/client/build && cd .. &&cd .. +cd client && yarn build && cd build && scp -r \*\* imex@prod-tor1.imex.online:~/bodyshop/client/build && cd .. &&cd .. gq https://bodyshop-dev-db.herokuapp.com/v1/graphql -H "X-Hasura-Admin-Secret: Dev-BodyShopAppBySnaptSoftware\!" --introspect > schema.graphql diff --git a/client/src/components/documents-upload/documents-upload.component.jsx b/client/src/components/documents-upload/documents-upload.component.jsx index 953f72fc3..65934d678 100644 --- a/client/src/components/documents-upload/documents-upload.component.jsx +++ b/client/src/components/documents-upload/documents-upload.component.jsx @@ -1,5 +1,5 @@ import { UploadOutlined } from "@ant-design/icons"; -import { Button, Upload } from "antd"; +import { Upload } from "antd"; import React from "react"; import { connect } from "react-redux"; import { createStructuredSelector } from "reselect"; @@ -50,11 +50,7 @@ export function DocumentsUploadComponent({

- Click or drag file to this area to upload -

-

- Support for a single or bulk upload. Strictly prohibit from - uploading company data or other band files + Click or drag files to this area to upload.

)} diff --git a/client/src/components/documents-upload/documents-upload.utility.js b/client/src/components/documents-upload/documents-upload.utility.js index 728938ed7..a265ee592 100644 --- a/client/src/components/documents-upload/documents-upload.utility.js +++ b/client/src/components/documents-upload/documents-upload.utility.js @@ -93,9 +93,10 @@ export const uploadToCloudinary = async ( formData.append("timestamp", timestamp); formData.append("signature", signature); - //Upload request to Cloudinary const cloudinaryUploadResponse = await cleanAxios.post( - `${process.env.REACT_APP_CLOUDINARY_ENDPOINT}/upload`, + `${process.env.REACT_APP_CLOUDINARY_ENDPOINT}/${DetermineFileType( + fileType + )}/upload`, formData, { ...options, @@ -156,3 +157,13 @@ export const uploadToCloudinary = async ( return; } }; + +export function DetermineFileType(filetype) { + console.log("Checking Type", filetype, filetype.startsWith("video")); + if (!filetype) return "auto"; + else if (filetype.startsWith("image")) return "image"; + else if (filetype.startsWith("video")) return "video"; + else if (filetype.startsWith("application/pdf")) return "image"; + + return "auto"; +} 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 e71c4f7e2..39899b193 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 @@ -23,30 +23,28 @@ function JobsDocumentsComponent({ console.log("value", value); if (value.type.includes("image")) { acc.images.push({ - src: `${ - 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 - }`, + 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}`, thumbnailHeight: 225, thumbnailWidth: 225, isSelected: false, key: value.key, id: value.id, + type: value.type, + tags: [{ value: value.type, title: value.type }], }); } else { acc.other.push({ - 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}`, + src: `${ + value.type.startsWith("video") + ? process.env.REACT_APP_CLOUDINARY_VIDEO_ENDPOINT + : process.env.REACT_APP_CLOUDINARY_IMAGE_ENDPOINT + }/q_auto/${value.key}`, + thumbnail: value.type.startsWith("video") + ? `${process.env.REACT_APP_CLOUDINARY_VIDEO_ENDPOINT}/c_fill,f_png,h_250,w_250/${value.key}` + : `${process.env.REACT_APP_CLOUDINARY_IMAGE_ENDPOINT}/${process.env.REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS}/${value.key}`, tags: [ - { value: "PDF", title: t("documents.labels.doctype") }, + { value: value.type, title: value.type }, ...(value.bill ? [ { @@ -66,6 +64,7 @@ function JobsDocumentsComponent({ isSelected: false, key: value.key, id: value.id, + type: value.type, }); } @@ -91,6 +90,12 @@ function JobsDocumentsComponent({ /> +
- @@ -141,12 +140,6 @@ function JobsDocumentsComponent({ }); }} /> -
diff --git a/client/src/components/jobs-documents-gallery/jobs-documents-gallery.delete.component.jsx b/client/src/components/jobs-documents-gallery/jobs-documents-gallery.delete.component.jsx index 6fda5e113..05679833b 100644 --- a/client/src/components/jobs-documents-gallery/jobs-documents-gallery.delete.component.jsx +++ b/client/src/components/jobs-documents-gallery/jobs-documents-gallery.delete.component.jsx @@ -7,6 +7,7 @@ import { useTranslation } from "react-i18next"; import { logImEXEvent } from "../../firebase/firebase.utils"; import { DELETE_DOCUMENT } from "../../graphql/documents.queries"; import cleanAxios from "../../utils/CleanAxios"; +import { DetermineFileType } from "../documents-upload/documents-upload.utility"; //Context: currentUserEmail, bodyshop, jobid, invoiceid export default function JobsDocumentsDeleteButton({ @@ -20,6 +21,7 @@ export default function JobsDocumentsDeleteButton({ ...galleryImages.other.filter((image) => image.isSelected), ]; const [loading, setLoading] = useState(false); + const handleDelete = () => { logImEXEvent("job_documents_delete", { count: imagesToDelete.length }); setLoading(true); @@ -45,7 +47,9 @@ export default function JobsDocumentsDeleteButton({ cleanAxios .post( - `${process.env.REACT_APP_CLOUDINARY_ENDPOINT}/destroy`, + `${process.env.REACT_APP_CLOUDINARY_ENDPOINT}/${DetermineFileType( + image.type + )}/destroy`, formData, options )