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

IO-3092 implement backwards compatibility for Cloudinary documents.

Browse Source
This commit is contained in:
Patrick Fic
2025-02-06 14:37:16 -08:00
parent 4d2d9500ff
commit fbb473941c
4 changed files with 24 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
client/src/components/documents-upload-imgproxy/documents-upload-imgproxy.utility.js
View File

@@ -20,8 +20,9 @@ export const handleUpload = (ev, context, notification) => {
const fileName = ev.file.name || ev.filename;
let key = replaceAccents(fileName).replace(/[^A-Z0-9.]+/gi, "_");
let extension = fileName.split(".").pop();
let key = `${bodyshop.id}/${jobId}/${replaceAccents(fileName).replace(/[^A-Z0-9]+/gi, "_")}-${new Date().getTime()}.${extension}`;
uploadToS3(key, extension, ev.file.type, ev.file, onError, onSuccess, onProgress, context, notification);
};
@@ -69,16 +70,6 @@ export const uploadToS3 = async (
}
};
// const formData = new FormData();
// formData.append("file", file);
// formData.append("upload_preset", upload_preset);
// formData.append("api_key", import.meta.env.VITE_APP_CLOUDINARY_API_KEY);
// formData.append("public_id", public_id);
// formData.append("tags", tags);
// formData.append("timestamp", timestamp);
// formData.append("signature", signature);
const cloudinaryUploadResponse = await cleanAxios.put(preSignedUploadUrlToS3, file, options);

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

@@ -118,9 +118,6 @@ function JobsDocumentsComponent({
const getProxiedUrls = async () => {
const result = await axios.post("/media/proxy/thumbnails", { jobid: jobId });
result.data.forEach((r) => console.log(r.thumbnailUrl));
let documents = result.data.reduce(
(acc, value) => {
const fileType = DetermineFileType(value.type);
@@ -195,8 +192,8 @@ function JobsDocumentsComponent({
};
// useEffect(() => {
// getProxiedUrls();
// }, [galleryImages]);
// if (data) getProxiedUrls();
// }, [data]);
const hasMediaAccess = HasFeatureAccess({ bodyshop, featureName: "media" });
const hasMobileAccess = HasFeatureAccess({ bodyshop, featureName: "mobile" });

2
server.js
View File

@@ -293,7 +293,7 @@ const applySocketIO = async ({ server, app }) => {
*/
const main = async () => {
const app = express();
const port = process.env.PORT || 5000;
const port = process.env.PORT || 4000;
const server = http.createServer(app);

31
server/media/imgprox-media.js
View File

@@ -9,13 +9,10 @@ const crypto = require("crypto");
const { InstanceRegion } = require("../utils/instanceMgr");
const { GET_DOCUMENTS_BY_JOB } = require("../graphql-client/queries");
//TODO: Remove hardcoded values.
const imgproxyBaseUrl =
process.env.IMGPROXY_BASE_URL ||
// `https://k2car6fha7w5cbgry3j2td56ra0kdmwn.lambda-url.ca-central-1.on.aws` ||
`https://d3ictiiutovkvi.cloudfront.net`;
const imgproxyKey = process.env.IMGPROXY_KEY || `secret`;
const imgproxySalt = process.env.IMGPROXY_SALT || `salt`;
const imgproxyDestinationBucket = process.env.IMGPROXY_DESTINATION_BUCKET || `imex-shop-media`;
const imgproxyBaseUrl = process.env.IMGPROXY_BASE_URL;
const imgproxyKey = process.env.IMGPROXY_KEY;
const imgproxySalt = process.env.IMGPROXY_SALT;
const imgproxyDestinationBucket = process.env.IMGPROXY_DESTINATION_BUCKET;
//Generate a signed upload link for the S3 bucket.
//All uploads must be going to the same shop and jobid.
@@ -35,7 +32,7 @@ exports.generateSignedUploadUrls = async (req, res) => {
const signedUrls = [];
for (const filename of filenames) {
// TODO: Implement a different, unique file naming convention.
const key = GenerateKey({ bodyshopid, jobid, filename });
const key = filename; //GenerateKey({ bodyshopid, jobid, filename });
const client = new S3Client({ region: InstanceRegion() });
const command = new PutObjectCommand({ Bucket: imgproxyDestinationBucket, Key: key });
const presignedUrl = await getSignedUrl(client, command, { expiresIn: 360 });
@@ -76,10 +73,17 @@ exports.getThumbnailUrls = async (req, res) => {
for (const document of data.documents) {
//Format to follow:
//<Cloudfront_to_lambdal>/<hmac with SHA of entire request URI path (with base64 encoded URL if needed), beginning with unencoded/unhashed Salt>/<remainder of url - resize params >/< base 64 URL encoded to image path>
//<Cloudfront_to_lambda>/<hmac with SHA of entire request URI path (with base64 encoded URL if needed), beginning with unencoded/unhashed Salt>/<remainder of url - resize params >/< base 64 URL encoded to image path>
//When working with documents from Cloudinary, the URL does not include the extension.
let key;
if (/\.[^/.]+$/.test(document.key)) {
key = document.key;
} else {
key = `${document.key}.${document.extension.toLowerCase()}`;
}
// Build the S3 path to the object.
const fullS3Path = `s3://${imgproxyDestinationBucket}/${document.key}`;
const fullS3Path = `s3://${imgproxyDestinationBucket}/${key}`;
const base64UrlEncodedKeyString = base64UrlEncode(fullS3Path);
//Thumbnail Generation Block
const thumbProxyPath = `${thumbResizeParams}/${base64UrlEncodedKeyString}`;
@@ -93,7 +97,10 @@ exports.getThumbnailUrls = async (req, res) => {
const s3Props = {};
if (!document.type.startsWith("image")) {
//If not a picture, we need to get a signed download link to the file using S3 (or cloudfront preferably)
const command = new GetObjectCommand({ Bucket: imgproxyDestinationBucket, Key: document.key });
const command = new GetObjectCommand({
Bucket: imgproxyDestinationBucket,
Key: key
});
const presignedGetUrl = await getSignedUrl(s3client, command, { expiresIn: 360 });
s3Props.presignedGetUrl = presignedGetUrl;
@@ -142,7 +149,7 @@ exports.deleteFiles = async (req, res) => {
function GenerateKey({ bodyshopid, jobid, filename }) {
let nameArray = filename.split(".");
let extension = nameArray.pop();
return `${bodyshopid}/${jobid}/${nameArray.join(".")}-${Date.now()}.${extension}`;
return `${bodyshopid}/${jobid}/${nameArray.join(".")}-${Date.now()}`;
}
function base64UrlEncode(str) {