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",
"i18next": "^19.3.4",
"node-sass": "^4.13.1",
"pica": "^5.1.0",
"query-string": "^6.11.1",
"react": "^16.13.1",
"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 {
Resizer.imageFileResizer(
ev.file,
3000,
3000,
"PNG",
2500,
2500,
"JPEG",
75,
0,
(uri) => {
@@ -57,6 +57,7 @@ export function DocumentsUploadContainer({
);
}
};
const uploadToS3 = (
fileName,
fileType,
@@ -65,84 +66,185 @@ export function DocumentsUploadContainer({
onSuccess,
onProgress
) => {
let timestamp = Math.floor(Date.now() / 1000);
console.log("timestamp", timestamp);
//Actually upload to cloudinary
axios
.post("/sign_s3", {
fileName,
fileType,
.post("/media/upload", {
eager: "w_200,h_200,c_fill",
public_id: timestamp,
timestamp: timestamp,
})
.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 signature = response.data;
console.log("signature", signature);
var options = {
headers: {
"Content-Type": fileType,
},
headers: { "X-Requested-With": "XMLHttpRequest" },
onUploadProgress: (e) => {
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
.put(signedRequest, file, options)
.post(
"https://api.cloudinary.com/v1_1/bodyshop/image/upload",
formData,
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);
}
});
console.log("response", 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) => console.log("error", error));
// .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),
}),
});
console.log("error", error);
// notification["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 (
<DocumentsUploadComponent
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(() => {
setgalleryImages(
data
.filter(item => item.thumb_url !== "application/pdf")
.filter((item) => item.thumb_url !== "application/pdf")
.reduce((acc, value) => {
acc.push({
src: value.url,
thumbnail: value.thumb_url,
thumbnailHeight: 150,
thumbnailWidth: 150,
isSelected: false
isSelected: false,
});
return acc;
}, [])
@@ -33,14 +33,14 @@ function JobsDocumentsComponent({ data, jobId, refetch }) {
useEffect(() => {
setPdfDocuments(
data
.filter(item => item.thumb_url === "application/pdf")
.filter((item) => item.thumb_url === "application/pdf")
.reduce((acc, value) => {
acc.push({
src: value.url,
thumbnail: value.thumb_url,
thumbnailHeight: 150,
thumbnailWidth: 150,
isSelected: false
isSelected: false,
});
return acc;
}, [])
@@ -50,17 +50,6 @@ function JobsDocumentsComponent({ data, jobId, refetch }) {
return (
<div className="clearfix">
<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.Panel key="t" header="t">

28
client/yarn.lock
View File

@@ -6346,6 +6346,11 @@ globule@^1.0.0:
lodash "~4.17.12"
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:
version "4.2.3"
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"
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:
version "0.0.8"
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"
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:
version "2.2.1"
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"
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:
version "1.0.5"
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",
"aws-sdk": "^2.630.0",
"body-parser": "^1.18.3",
"cloudinary": "^1.21.0",
"compression": "^1.7.4",
"cors": "2.8.5",
"dotenv": "8.2.0",

31
server.js
View File

@@ -11,8 +11,8 @@ const https = require("https");
const fs = require("fs");
const app = express();
//const port = process.env.PORT || 5000;
const port = 5000;
const port = process.env.PORT || 5000;
//const port = 5000;
app.use(compression());
app.use(bodyParser.json());
@@ -20,18 +20,20 @@ app.use(bodyParser.urlencoded({ extended: true }));
//app.use(enforce.HTTPS({ trustProtoHeader: true }));
app.use(cors());
var s3upload = require("./s3upload");
app.post("/sign_s3", s3upload.sign_s3);
app.get("/sign_s3", s3upload.get_s3);
app.post("/delete_s3", s3upload.delete_s3);
//Email Based Paths.
var sendEmail = require("./sendemail.js");
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 });
});
//Cloudinary Media Paths
var media = require("./server/media/media");
app.post("/media/upload", media.createSignedUploadURL);
//SMS/Twilio Paths
var smsReceive = require("./server/sms/receive");
app.post(
"/sms/receive",
@@ -47,12 +49,11 @@ app.post(
smsStatus.status
);
var downloadImages = require("./download-images");
app.get("/downloadImages", downloadImages.downloadImages);
//Handlebars Paths for Email/Report Rendering
var renderHandlebars = require("./server/render/renderHandlebars");
app.post("/render", renderHandlebars.render);
//Serve React App if in Production
if (process.env.NODE_ENV === "production") {
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"));
});
app.get("*", function(req, res) {
app.get("*", function (req, res) {
res.sendFile(path.join(__dirname, "client/build", "index.html"));
});
}
if (process.env.NODE_ENV === "production") {
app.listen(port, error => {
app.listen(port, (error) => {
if (error) throw error;
console.log("[PRODUCTION] Server running on port " + port);
});
@@ -76,11 +77,11 @@ if (process.env.NODE_ENV === "production") {
{
key: fs.readFileSync("./key.pem"),
cert: fs.readFileSync("./cert.pem"),
passphrase: "Wl0d8k@!"
passphrase: "Wl0d8k@!",
},
app
)
.listen(port, error => {
.listen(port, (error) => {
if (error) throw error;
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"
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:
version "1.9.3"
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"
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:
version "6.7.0"
resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"