From 5f256c204ddefb74e924c1c36be743259379ead6 Mon Sep 17 00:00:00 2001 From: Patrick Fic Date: Fri, 24 Jan 2020 11:03:33 -0800 Subject: [PATCH] Added CDN thumb generation. --- .../jobs-documents.component.jsx | 205 +++++++++--------- .../jobs-documents.container.jsx | 16 +- .../pages/jobs-detail/jobs-detail.page.jsx | 1 - client/src/utils/DocHelpers.js | 13 ++ 4 files changed, 130 insertions(+), 105 deletions(-) create mode 100644 client/src/utils/DocHelpers.js diff --git a/client/src/components/jobs-documents/jobs-documents.component.jsx b/client/src/components/jobs-documents/jobs-documents.component.jsx index 7e72b4d22..d3a092682 100644 --- a/client/src/components/jobs-documents/jobs-documents.component.jsx +++ b/client/src/components/jobs-documents/jobs-documents.component.jsx @@ -6,6 +6,7 @@ import { useTranslation } from "react-i18next"; import Resizer from "react-image-file-resizer"; import { INSERT_NEW_DOCUMENT } from "../../graphql/documents.queries"; import "./jobs-documents.styles.scss"; +import { generateCdnThumb } from "../../utils/DocHelpers"; function getBase64(file) { return new Promise((resolve, reject) => { @@ -16,7 +17,7 @@ function getBase64(file) { }); } -function JobsDocumentsComponent({ shopId, jobId, loading, data }) { +function JobsDocumentsComponent({ shopId, jobId, loading, data, currentUser }) { const { t } = useTranslation(); const [insertNewDocument] = useMutation(INSERT_NEW_DOCUMENT); @@ -29,98 +30,108 @@ function JobsDocumentsComponent({ shopId, jobId, loading, data }) { data.reduce((acc, value) => { acc.push({ uid: value.id, - url: value.url, + url: value.thumb_url, name: value.name, - status: "done", - thumUrl: - "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" + status: "done" }); return acc; }, []) ); - const handleUpload = ev => { - const { onError, onSuccess, onProgress } = ev; + const uploadToS3 = ( + fileName, + fileType, + file, + onError, + onSuccess, + onProgress + ) => { + axios + .post("/sign_s3", { + fileName, + fileType + }) + .then(response => { + var returnData = response.data.data.returnData; + var signedRequest = returnData.signedRequest; + var url = returnData.url; + setState({ ...state, url: url }); + // Put the fileType in the headers for the upload + var options = { + headers: { + "Content-Type": fileType + }, + onUploadProgress: e => { + onProgress({ percent: (e.loaded / e.total) * 100 }); + } + }; - Resizer.imageFileResizer( - ev.file, - 3000, - 3000, - "JPEG", - 75, - 0, - uri => { - let file = new File([uri], ev.file.name, {}); - file.uid = ev.file.uid; - // Split the filename to get the name and type - let fileName = file.name; - let fileType = file.type; - let key = `${shopId}/${jobId}/${fileName}`; - //URL is using the proxy set in pacakges.json. axios - .post("/sign_s3", { - fileName: key, - fileType - }) + .put(signedRequest, file, options) .then(response => { - var returnData = response.data.data.returnData; - var signedRequest = returnData.signedRequest; - var url = returnData.url; - setState({ ...state, url: url }); - // Put the fileType in the headers for the upload - var options = { - headers: { - "Content-Type": fileType - }, - onUploadProgress: e => { - onProgress({ percent: (e.loaded / e.total) * 100 }); - } - }; - - axios - .put(signedRequest, file, options) - .then(response => { - onSuccess(response.body); - insertNewDocument({ - variables: { - docInput: [ - { - jobid: jobId, - uploaded_by: "patrick@bodyshop.app", - url, - thumb_url: url - } - ] + onSuccess(response.body); + insertNewDocument({ + variables: { + docInput: [ + { + jobid: jobId, + uploaded_by: currentUser.email, + url, + thumb_url: generateCdnThumb(fileName), + key: fileName } - }).then(r => { - console.log(r); - notification["success"]({ - message: t("documents.successes.insert") - }); - }); - - setState({ ...state, success: true }); - }) - .catch(error => { - console.log("Error uploading to S3", error); - onError(error); - notification["error"]({ - message: t("documents.errors.insert") + JSON.stringify(error) - }); + ] + } + }).then(r => { + console.log(r); + notification["success"]({ + message: t("documents.successes.insert") }); + }); + + setState({ ...state, success: true }); }) .catch(error => { - console.log("Outside Error here.", error); + console.log("Error uploading to S3", error); + onError(error); notification["error"]({ - message: - t("documents.errors.getpresignurl") + JSON.stringify(error) + message: t("documents.errors.insert") + JSON.stringify(error) }); }); - }, - "blob" - ); + }) + .catch(error => { + console.log("Outside Error here.", error); + notification["error"]({ + message: t("documents.errors.getpresignurl") + JSON.stringify(error) + }); + }); }; + const handleUpload = ev => { + const { onError, onSuccess, onProgress } = ev; + //If PDF, upload directly. + //If JPEG, resize and upload. + let key = `${shopId}/${jobId}/${ev.file.name}`; + if (ev.file.type === "application/pdf") { + console.log("It's a PDF."); + uploadToS3(key, ev.file.type, ev.file, onError, onSuccess, onProgress); + } else { + Resizer.imageFileResizer( + ev.file, + 3000, + 3000, + "JPEG", + 75, + 0, + uri => { + let file = new File([uri], ev.file.name, {}); + file.uid = ev.file.uid; + uploadToS3(key, file.type, file, onError, onSuccess, onProgress); + }, + "blob" + ); + } + }; const handleCancel = () => setState({ ...state, previewVisible: false }); const handlePreview = async file => { @@ -136,38 +147,32 @@ function JobsDocumentsComponent({ shopId, jobId, loading, data }) { }; const handleChange = props => { const { fileList } = props; - console.log("New fileList", fileList); setFileList(fileList); }; const { previewVisible, previewImage } = state; - // const uploadButton = ( - //
- // - //
{t("documents.labels.upload")}
- //
- // ); - console.log( - "process.env.REACT_APP_S3_BUCKET", - process.env.REACT_APP_S3_BUCKET - ); - const imageRequest = JSON.stringify({ - bucket: process.env.REACT_APP_S3_BUCKET, - key: - "52b7357c-0edd-4c95-85c3-dfdbcdfad9ac/f11e92a4-8a7d-4ec0-86ac-2f46b631e438/thumb-1920-459857.jpg", - edits: { - resize: { - height: 100, - width: 100 - } - } - }); - const CloudFrontUrl = "https://d18fc493a0fm4o.cloudfront.net"; - const url = `${CloudFrontUrl}/${btoa(imageRequest)}`; - console.log("url", url); return (
+ ; - if (error) return ; - if (shopData.error) - return ; + const user = useQuery(GET_CURRENT_USER); + + if (loading || shopData.loading || user.loading) return ; + if (error || shopData.error || user.error) + return ( + + ); return ( diff --git a/client/src/utils/DocHelpers.js b/client/src/utils/DocHelpers.js new file mode 100644 index 000000000..be8d28632 --- /dev/null +++ b/client/src/utils/DocHelpers.js @@ -0,0 +1,13 @@ +export const generateCdnThumb = key => { + const imageRequest = JSON.stringify({ + bucket: process.env.REACT_APP_S3_BUCKET, + key: key, + edits: { + resize: { + height: 100, + width: 100 + } + } + }); + return `${process.env.REACT_APP_S3_CDN}/${btoa(imageRequest)}`; +};