admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

BOD-69 Testing out code for Cloudinary + swapping out resizer.

Browse Source
This commit is contained in:
Patrick Fic
2020-04-17 17:01:03 -07:00
parent 8a4278d644
commit e9a7f5e223
9 changed files with 249 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/package.json
View File

@@ -21,6 +21,7 @@
"graphql": "^14.6.0", "graphql": "^14.6.0",
"i18next": "^19.3.4", "i18next": "^19.3.4",
"node-sass": "^4.13.1", "node-sass": "^4.13.1",
"pica": "^5.1.0",
"query-string": "^6.11.1", "query-string": "^6.11.1",
"react": "^16.13.1", "react": "^16.13.1",
"react-apollo": "^3.1.3", "react-apollo": "^3.1.3",

232
client/src/components/documents-upload/documents-upload.container.jsx
View File

@@ -43,9 +43,9 @@ export function DocumentsUploadContainer({
} else { } else {
Resizer.imageFileResizer( Resizer.imageFileResizer(
ev.file, ev.file,
3000, 2500,
3000, 2500,
"PNG", "JPEG",
75, 75,
0, 0,
(uri) => { (uri) => {
@@ -57,6 +57,7 @@ export function DocumentsUploadContainer({
); );
} }
}; };
const uploadToS3 = ( const uploadToS3 = (
fileName, fileName,
fileType, fileType,
@@ -65,84 +66,185 @@ export function DocumentsUploadContainer({
onSuccess, onSuccess,
onProgress onProgress
) => { ) => {
let timestamp = Math.floor(Date.now() / 1000);
console.log("timestamp", timestamp);
//Actually upload to cloudinary
axios axios
.post("/sign_s3", { .post("/media/upload", {
fileName, eager: "w_200,h_200,c_fill",
fileType, public_id: timestamp,
timestamp: timestamp,
}) })
.then((response) => { .then((response) => {
var returnData = response.data.data.returnData; var signature = response.data;
var signedRequest = returnData.signedRequest; console.log("signature", signature);
var url = returnData.url;
// setState({ ...state, url: url });
// Put the fileType in the headers for the upload
var options = { var options = {
headers: { headers: { "X-Requested-With": "XMLHttpRequest" },
"Content-Type": fileType,
},
onUploadProgress: (e) => { onUploadProgress: (e) => {
onProgress({ percent: (e.loaded / e.total) * 100 }); onProgress({ percent: (e.loaded / e.total) * 100 });
}, },
}; };
const formData = new FormData();
formData.append("file", file);
formData.append("eager", "w_200,h_200,c_fill");
formData.append("api_key", "473322739956866");
formData.append("public_id", timestamp);
formData.append("timestamp", timestamp);
formData.append("signature", signature);
axios axios
.put(signedRequest, file, options) .post(
"https://api.cloudinary.com/v1_1/bodyshop/image/upload",
formData,
options
)
.then((response) => { .then((response) => {
insertNewDocument({ console.log("response", response);
variables: { // insertNewDocument({
docInput: [ // variables: {
{ // docInput: [
jobid: jobId, // {
uploaded_by: currentUser.email, // jobid: jobId,
url, // uploaded_by: currentUser.email,
thumb_url: // url,
fileType === "application/pdf" // thumb_url:
? "application/pdf" // fileType === "application/pdf"
: generateCdnThumb(fileName), // ? "application/pdf"
key: fileName, // : generateCdnThumb(fileName),
invoiceid: invoiceId, // key: fileName,
}, // invoiceid: invoiceId,
], // },
}, // ],
}).then((r) => { // },
onSuccess({ // }).then((r) => {
uid: r.data.insert_documents.returning[0].id, // onSuccess({
url: r.data.insert_documents.returning[0].thumb_url, // uid: r.data.insert_documents.returning[0].id,
name: r.data.insert_documents.returning[0].name, // url: r.data.insert_documents.returning[0].thumb_url,
status: "done", // name: r.data.insert_documents.returning[0].name,
full_url: r.data.insert_documents.returning[0].url, // status: "done",
key: r.data.insert_documents.returning[0].key, // full_url: r.data.insert_documents.returning[0].url,
}); // key: r.data.insert_documents.returning[0].key,
notification["success"]({ // });
message: t("documents.successes.insert"), // notification["success"]({
}); // message: t("documents.successes.insert"),
if (callbackAfterUpload) { // });
callbackAfterUpload(); // if (callbackAfterUpload) {
} // callbackAfterUpload();
console.log("ref", UploadRef.current.state.fileList); // }
if (onChange) { // console.log("ref", UploadRef.current.state.fileList);
//Used in a form. // if (onChange) {
onChange(UploadRef.current.state.fileList); // //Used in a form.
} // onChange(UploadRef.current.state.fileList);
}); // }
// });
}) })
.catch((error) => { .catch((error) => console.log("error", error));
onError(error); // .catch((error) => {
notification["error"]({ // onError(error);
message: t("documents.errors.insert", { // notification["error"]({
message: JSON.stringify(error), // message: t("documents.errors.insert", {
}), // message: JSON.stringify(error),
}); // }),
}); // });
// });
}) })
.catch((error) => { .catch((error) => {
notification["error"]({ console.log("error", error);
message: t("documents.errors.getpresignurl", { // notification["error"]({
message: JSON.stringify(error), // message: t("documents.errors.getpresignurl", {
}), // message: JSON.stringify(error),
}); // }),
// });
}); });
}; };
// 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 });
// },
// };
// axios
// .put(signedRequest, file, options)
// .then((response) => {
// insertNewDocument({
// variables: {
// docInput: [
// {
// jobid: jobId,
// uploaded_by: currentUser.email,
// url,
// thumb_url:
// fileType === "application/pdf"
// ? "application/pdf"
// : generateCdnThumb(fileName),
// key: fileName,
// invoiceid: invoiceId,
// },
// ],
// },
// }).then((r) => {
// onSuccess({
// uid: r.data.insert_documents.returning[0].id,
// url: r.data.insert_documents.returning[0].thumb_url,
// name: r.data.insert_documents.returning[0].name,
// status: "done",
// full_url: r.data.insert_documents.returning[0].url,
// key: r.data.insert_documents.returning[0].key,
// });
// notification["success"]({
// message: t("documents.successes.insert"),
// });
// if (callbackAfterUpload) {
// callbackAfterUpload();
// }
// console.log("ref", UploadRef.current.state.fileList);
// if (onChange) {
// //Used in a form.
// onChange(UploadRef.current.state.fileList);
// }
// });
// })
// .catch((error) => {
// onError(error);
// notification["error"]({
// message: t("documents.errors.insert", {
// message: JSON.stringify(error),
// }),
// });
// });
// })
// .catch((error) => {
// notification["error"]({
// message: t("documents.errors.getpresignurl", {
// message: JSON.stringify(error),
// }),
// });
// });
// };
return ( return (
<DocumentsUploadComponent <DocumentsUploadComponent
handleUpload={handleUpload} handleUpload={handleUpload}

19
client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx
View File

@@ -16,14 +16,14 @@ function JobsDocumentsComponent({ data, jobId, refetch }) {
useEffect(() => { useEffect(() => {
setgalleryImages( setgalleryImages(
data data
.filter(item => item.thumb_url !== "application/pdf") .filter((item) => item.thumb_url !== "application/pdf")
.reduce((acc, value) => { .reduce((acc, value) => {
acc.push({ acc.push({
src: value.url, src: value.url,
thumbnail: value.thumb_url, thumbnail: value.thumb_url,
thumbnailHeight: 150, thumbnailHeight: 150,
thumbnailWidth: 150, thumbnailWidth: 150,
isSelected: false isSelected: false,
}); });
return acc; return acc;
}, []) }, [])
@@ -33,14 +33,14 @@ function JobsDocumentsComponent({ data, jobId, refetch }) {
useEffect(() => { useEffect(() => {
setPdfDocuments( setPdfDocuments(
data data
.filter(item => item.thumb_url === "application/pdf") .filter((item) => item.thumb_url === "application/pdf")
.reduce((acc, value) => { .reduce((acc, value) => {
acc.push({ acc.push({
src: value.url, src: value.url,
thumbnail: value.thumb_url, thumbnail: value.thumb_url,
thumbnailHeight: 150, thumbnailHeight: 150,
thumbnailWidth: 150, thumbnailWidth: 150,
isSelected: false isSelected: false,
}); });
return acc; return acc;
}, []) }, [])
@@ -50,17 +50,6 @@ function JobsDocumentsComponent({ data, jobId, refetch }) {
return ( return (
<div className="clearfix"> <div className="clearfix">
<DocumentsUploadContainer jobId={jobId} callbackAfterUpload={refetch} /> <DocumentsUploadContainer jobId={jobId} callbackAfterUpload={refetch} />
<button
onClick={() => {
axios
.get("/downloadImages", {
images: galleryImages.map(i => i.src)
})
.then(r => console.log("r", r));
}}
>
Dl
</button>
<Collapse defaultActiveKey="photos"> <Collapse defaultActiveKey="photos">
<Collapse.Panel key="t" header="t"> <Collapse.Panel key="t" header="t">

28
client/yarn.lock
View File

@@ -6346,6 +6346,11 @@ globule@^1.0.0:
lodash "~4.17.12" lodash "~4.17.12"
minimatch "~3.0.2" minimatch "~3.0.2"
glur@^1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/glur/-/glur-1.1.2.tgz#f20ea36db103bfc292343921f1f91e83c3467689"
integrity sha1-8g6jbbEDv8KSNDkh8fkeg8NGdok=
graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.2: graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.2:
version "4.2.3" version "4.2.3"
resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.3.tgz#4a12ff1b60376ef09862c2093edd908328be8423" resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.3.tgz#4a12ff1b60376ef09862c2093edd908328be8423"
@@ -8734,6 +8739,14 @@ multicast-dns@^6.0.1:
dns-packet "^1.3.1" dns-packet "^1.3.1"
thunky "^1.0.2" thunky "^1.0.2"
multimath@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/multimath/-/multimath-2.0.0.tgz#0d37acf67c328f30e3d8c6b0d3209e6082710302"
integrity sha512-toRx66cAMJ+Ccz7pMIg38xSIrtnbozk0dchXezwQDMgQmbGpfxjtv68H+L00iFL8hxDaVjrmwAFSb3I6bg8Q2g==
dependencies:
glur "^1.1.2"
object-assign "^4.1.1"
mute-stream@0.0.8: mute-stream@0.0.8:
version "0.0.8" version "0.0.8"
resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d" resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
@@ -9642,6 +9655,16 @@ performance-now@^2.1.0:
resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b" resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns= integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
pica@^5.1.0:
version "5.1.0"
resolved "https://registry.yarnpkg.com/pica/-/pica-5.1.0.tgz#042d58730f32f3f014eb099e7d204474f7d14e49"
integrity sha512-1sr5HOypUfWT+oP/PXEZaF+kOBxhr+iMo4MEBSTNIHSjF/aGOCIWcjHjKTa0FKZ+BsPx5LmxYuNf4FoCckI3lQ==
dependencies:
inherits "^2.0.3"
multimath "^2.0.0"
object-assign "^4.1.1"
webworkify "^1.5.0"
picomatch@^2.0.4, picomatch@^2.0.7: picomatch@^2.0.4, picomatch@^2.0.7:
version "2.2.1" version "2.2.1"
resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.1.tgz#21bac888b6ed8601f831ce7816e335bc779f0a4a" resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.1.tgz#21bac888b6ed8601f831ce7816e335bc779f0a4a"
@@ -13800,6 +13823,11 @@ websocket-extensions@>=0.1.1:
resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.3.tgz#5d2ff22977003ec687a4b87073dfbbac146ccf29" resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.3.tgz#5d2ff22977003ec687a4b87073dfbbac146ccf29"
integrity sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg== integrity sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==
webworkify@^1.5.0:
version "1.5.0"
resolved "https://registry.yarnpkg.com/webworkify/-/webworkify-1.5.0.tgz#734ad87a774de6ebdd546e1d3e027da5b8f4a42c"
integrity sha512-AMcUeyXAhbACL8S2hqqdqOLqvJ8ylmIbNwUIqQujRSouf4+eUFaXbG6F1Rbu+srlJMmxQWsiU7mOJi0nMBfM1g==
whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3, whatwg-encoding@^1.0.5: whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3, whatwg-encoding@^1.0.5:
version "1.0.5" version "1.0.5"
resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz#5abacf777c32166a51d085d6b4f3e7d27113ddb0" resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz#5abacf777c32166a51d085d6b4f3e7d27113ddb0"

24
download-images.js
View File

@@ -1,24 +0,0 @@
//var JSZip = require("jszip");
const axios = require("axios"); // to get the images
require("dotenv").config();
module.exports.downloadImages = async function(req, res) {
if (process.env.NODE_ENV !== "production") {
console.log("[IMAGES] Incoming Images to Download", req.body);
}
// const zip = new JSZip();
// //res.json({ success: true });
// req.body.images.forEach(i => {
// axios.get(i).then(r => zip.file(r));
// // const buffer = await response.buffer();
// // zip.file(file, buffer);
// });
// // // Set the name of the zip file in the download
// res.setHeader("Content-Type", "application/zip");
// zip.generateAsync({ type: "nodebuffer" }).then(
// function(content) {
// res.send(content);
// }.bind(res)
// );
};

1
package.json
View File

@@ -19,6 +19,7 @@
"apollo-cache-persist": "^0.1.1", "apollo-cache-persist": "^0.1.1",
"aws-sdk": "^2.630.0", "aws-sdk": "^2.630.0",
"body-parser": "^1.18.3", "body-parser": "^1.18.3",
"cloudinary": "^1.21.0",
"compression": "^1.7.4", "compression": "^1.7.4",
"cors": "2.8.5", "cors": "2.8.5",
"dotenv": "8.2.0", "dotenv": "8.2.0",

31
server.js
View File

@@ -11,8 +11,8 @@ const https = require("https");
const fs = require("fs"); const fs = require("fs");
const app = express(); const app = express();
//const port = process.env.PORT || 5000; const port = process.env.PORT || 5000;
const port = 5000; //const port = 5000;
app.use(compression()); app.use(compression());
app.use(bodyParser.json()); app.use(bodyParser.json());
@@ -20,18 +20,20 @@ app.use(bodyParser.urlencoded({ extended: true }));
//app.use(enforce.HTTPS({ trustProtoHeader: true })); //app.use(enforce.HTTPS({ trustProtoHeader: true }));
app.use(cors()); app.use(cors());
var s3upload = require("./s3upload"); //Email Based Paths.
app.post("/sign_s3", s3upload.sign_s3);
app.get("/sign_s3", s3upload.get_s3);
app.post("/delete_s3", s3upload.delete_s3);
var sendEmail = require("./sendemail.js"); var sendEmail = require("./sendemail.js");
app.post("/sendemail", sendEmail.sendEmail); app.post("/sendemail", sendEmail.sendEmail);
app.get("/test", function(req, res) { //Test route to ensure Express is responding.
app.get("/test", function (req, res) {
res.json({ success: true }); res.json({ success: true });
}); });
//Cloudinary Media Paths
var media = require("./server/media/media");
app.post("/media/upload", media.createSignedUploadURL);
//SMS/Twilio Paths
var smsReceive = require("./server/sms/receive"); var smsReceive = require("./server/sms/receive");
app.post( app.post(
"/sms/receive", "/sms/receive",
@@ -47,12 +49,11 @@ app.post(
smsStatus.status smsStatus.status
); );
var downloadImages = require("./download-images"); //Handlebars Paths for Email/Report Rendering
app.get("/downloadImages", downloadImages.downloadImages);
var renderHandlebars = require("./server/render/renderHandlebars"); var renderHandlebars = require("./server/render/renderHandlebars");
app.post("/render", renderHandlebars.render); app.post("/render", renderHandlebars.render);
//Serve React App if in Production
if (process.env.NODE_ENV === "production") { if (process.env.NODE_ENV === "production") {
app.use(express.static(path.join(__dirname, "client/build"))); app.use(express.static(path.join(__dirname, "client/build")));
@@ -60,13 +61,13 @@ if (process.env.NODE_ENV === "production") {
res.sendFile(path.resolve(__dirname, "..", "build", "service-worker.js")); res.sendFile(path.resolve(__dirname, "..", "build", "service-worker.js"));
}); });
app.get("*", function(req, res) { app.get("*", function (req, res) {
res.sendFile(path.join(__dirname, "client/build", "index.html")); res.sendFile(path.join(__dirname, "client/build", "index.html"));
}); });
} }
if (process.env.NODE_ENV === "production") { if (process.env.NODE_ENV === "production") {
app.listen(port, error => { app.listen(port, (error) => {
if (error) throw error; if (error) throw error;
console.log("[PRODUCTION] Server running on port " + port); console.log("[PRODUCTION] Server running on port " + port);
}); });
@@ -76,11 +77,11 @@ if (process.env.NODE_ENV === "production") {
{ {
key: fs.readFileSync("./key.pem"), key: fs.readFileSync("./key.pem"),
cert: fs.readFileSync("./cert.pem"), cert: fs.readFileSync("./cert.pem"),
passphrase: "Wl0d8k@!" passphrase: "Wl0d8k@!",
}, },
app app
) )
.listen(port, error => { .listen(port, (error) => {
if (error) throw error; if (error) throw error;
console.log("[DEV/STAGING] Mock HTTPS Server running on port " + port); console.log("[DEV/STAGING] Mock HTTPS Server running on port " + port);
}); });

19
server/media/media.js Normal file
View File

@@ -0,0 +1,19 @@
require("dotenv").config();
var cloudinary = require("cloudinary").v2;
cloudinary.config(process.env.CLOUDINARY_URL);
exports.createSignedUploadURL = (req, res) => {
console.log("Requrest to create signed upload URL for Cloudinary.", req.body);
console.log(
"cloudinary.config.api_secret",
process.env.CLOUDINARY_API_SECRET
);
res.send(
cloudinary.utils.api_sign_request(
req.body,
process.env.CLOUDINARY_API_SECRET
)
);
};

13
yarn.lock
View File

@@ -835,6 +835,14 @@ clone@^1.0.2:
resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e" resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4= integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=
cloudinary@^1.21.0:
version "1.21.0"
resolved "https://registry.yarnpkg.com/cloudinary/-/cloudinary-1.21.0.tgz#9c30935190f49f2e9a0e26a16cd8ade580f675cc"
integrity sha512-am8wpHbHl8bcpy9oGSlWrpWLNQ9szkW/jmhcJdEpMjaL23BYt05V1frWyrXDlo8Jt7aCo5NE6EO0CM9Zaynd5g==
dependencies:
lodash "^4.17.11"
q "^1.5.1"
color-convert@^1.9.0: color-convert@^1.9.0:
version "1.9.3" version "1.9.3"
resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8" resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -3421,6 +3429,11 @@ q@2.0.x:
pop-iterate "^1.0.1" pop-iterate "^1.0.1"
weak-map "^1.0.5" weak-map "^1.0.5"
q@^1.5.1:
version "1.5.1"
resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
qs@6.7.0: qs@6.7.0:
version "6.7.0" version "6.7.0"
resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc" resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"