IO-3092 WIP on img proxy thumbnail generation.
This commit is contained in:
Patrick Fic
@@ -0,0 +1,123 @@
|
||||
import { UploadOutlined } from "@ant-design/icons";
|
||||
import { Progress, Result, Space, Upload } from "antd";
|
||||
import { useMemo, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { connect } from "react-redux";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
|
||||
import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
|
||||
import formatBytes from "../../utils/formatbytes";
|
||||
import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
|
||||
import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
|
||||
import { handleUpload } from "./documents-upload-imgproxy.utility.js";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
currentUser: selectCurrentUser,
|
||||
bodyshop: selectBodyshop
|
||||
});
|
||||
|
||||
export function DocumentsUploadImgproxyComponent({
|
||||
children,
|
||||
currentUser,
|
||||
bodyshop,
|
||||
jobId,
|
||||
tagsArray,
|
||||
billId,
|
||||
callbackAfterUpload,
|
||||
totalSize,
|
||||
ignoreSizeLimit = false
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const [fileList, setFileList] = useState([]);
|
||||
const notification = useNotification();
|
||||
|
||||
const pct = useMemo(() => {
|
||||
return parseInt((totalSize / ((bodyshop && bodyshop.jobsizelimit) || 1)) * 100);
|
||||
}, [bodyshop, totalSize]);
|
||||
|
||||
if (pct > 100 && !ignoreSizeLimit)
|
||||
return (
|
||||
<Result
|
||||
status="error"
|
||||
title={t("documents.labels.storageexceeded_title")}
|
||||
subTitle={t("documents.labels.storageexceeded")}
|
||||
/>
|
||||
);
|
||||
|
||||
const handleDone = (uid) => {
|
||||
setTimeout(() => {
|
||||
setFileList((fileList) => fileList.filter((x) => x.uid !== uid));
|
||||
}, 2000);
|
||||
};
|
||||
const hasMediaAccess = HasFeatureAccess({ bodyshop, featureName: "media" });
|
||||
|
||||
return (
|
||||
<Upload.Dragger
|
||||
multiple={true}
|
||||
fileList={fileList}
|
||||
disabled={!hasMediaAccess}
|
||||
onChange={(f) => {
|
||||
if (f.event && f.event.percent === 100) handleDone(f.file.uid);
|
||||
setFileList(f.fileList);
|
||||
}}
|
||||
beforeUpload={(file, fileList) => {
|
||||
if (ignoreSizeLimit) return true;
|
||||
const newFiles = fileList.reduce((acc, val) => acc + val.size, 0);
|
||||
const shouldStopUpload = (totalSize + newFiles) / ((bodyshop && bodyshop.jobsizelimit) || 1) >= 1;
|
||||
|
||||
//Check to see if old files plus newly uploaded ones will be too much.
|
||||
if (shouldStopUpload) {
|
||||
notification.open({
|
||||
key: "cannotuploaddocuments",
|
||||
type: "error",
|
||||
message: t("documents.labels.upload_limitexceeded_title"),
|
||||
description: t("documents.labels.upload_limitexceeded")
|
||||
});
|
||||
return Upload.LIST_IGNORE;
|
||||
}
|
||||
return true;
|
||||
}}
|
||||
customRequest={(ev) =>
|
||||
handleUpload(
|
||||
ev,
|
||||
{
|
||||
bodyshop: bodyshop,
|
||||
uploaded_by: currentUser.email,
|
||||
jobId: jobId,
|
||||
billId: billId,
|
||||
tagsArray: tagsArray,
|
||||
callback: callbackAfterUpload
|
||||
},
|
||||
notification
|
||||
)
|
||||
}
|
||||
accept="audio/*, video/*, image/*, .pdf, .doc, .docx, .xls, .xlsx"
|
||||
// showUploadList={false}
|
||||
>
|
||||
{children || (
|
||||
<>
|
||||
<p className="ant-upload-drag-icon">
|
||||
<UploadOutlined />
|
||||
</p>
|
||||
<p className="ant-upload-text">
|
||||
<LockWrapperComponent featureName="media">{t("documents.labels.dragtoupload")}</LockWrapperComponent>
|
||||
</p>
|
||||
{!ignoreSizeLimit && (
|
||||
<Space wrap className="ant-upload-text">
|
||||
<Progress type="dashboard" percent={pct} size="small" />
|
||||
<span>
|
||||
{t("documents.labels.usage", {
|
||||
percent: pct,
|
||||
used: formatBytes(totalSize),
|
||||
total: formatBytes(bodyshop && bodyshop.jobsizelimit)
|
||||
})}
|
||||
</span>
|
||||
</Space>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Upload.Dragger>
|
||||
);
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps, null)(DocumentsUploadImgproxyComponent);
|
||||
@@ -0,0 +1,181 @@
|
||||
import axios from "axios";
|
||||
import exifr from "exifr";
|
||||
import i18n from "i18next";
|
||||
import { logImEXEvent } from "../../firebase/firebase.utils";
|
||||
import { INSERT_NEW_DOCUMENT } from "../../graphql/documents.queries";
|
||||
import { axiosAuthInterceptorId } from "../../utils/CleanAxios";
|
||||
import client from "../../utils/GraphQLClient";
|
||||
|
||||
//Context: currentUserEmail, bodyshop, jobid, invoiceid
|
||||
|
||||
//Required to prevent headers from getting set and rejected from Cloudinary.
|
||||
var cleanAxios = axios.create();
|
||||
cleanAxios.interceptors.request.eject(axiosAuthInterceptorId);
|
||||
|
||||
export const handleUpload = (ev, context, notification) => {
|
||||
logImEXEvent("document_upload", { filetype: ev.file.type });
|
||||
|
||||
const { onError, onSuccess, onProgress } = ev;
|
||||
const { bodyshop, jobId } = context;
|
||||
|
||||
const fileName = ev.file.name || ev.filename;
|
||||
|
||||
let key = replaceAccents(fileName).replace(/[^A-Z0-9.]+/gi, "_");
|
||||
let extension = fileName.split(".").pop();
|
||||
uploadToS3(key, extension, ev.file.type, ev.file, onError, onSuccess, onProgress, context, notification);
|
||||
};
|
||||
|
||||
//Handles only 1 file at a time.
|
||||
export const uploadToS3 = async (
|
||||
key,
|
||||
extension,
|
||||
fileType,
|
||||
file,
|
||||
onError,
|
||||
onSuccess,
|
||||
onProgress,
|
||||
context,
|
||||
notification
|
||||
) => {
|
||||
const { bodyshop, jobId, billId, uploaded_by, callback, tagsArray } = context;
|
||||
|
||||
//Set variables for getting the signed URL.
|
||||
let timestamp = Math.floor(Date.now() / 1000);
|
||||
//Get the signed url.
|
||||
|
||||
const signedURLResponse = await axios.post("/media/proxy/sign", {
|
||||
filenames: [key],
|
||||
bodyshopid: bodyshop.id,
|
||||
jobid: jobId
|
||||
});
|
||||
|
||||
if (signedURLResponse.status !== 200) {
|
||||
if (onError) onError(signedURLResponse.statusText);
|
||||
notification["error"]({
|
||||
message: i18n.t("documents.errors.getpresignurl", {
|
||||
message: signedURLResponse.statusText
|
||||
})
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const { presignedUrl: preSignedUploadUrlToS3, key: s3Key } = signedURLResponse.data.signedUrls[0];
|
||||
|
||||
//Build request to end to cloudinary.
|
||||
var options = {
|
||||
// headers: { "X-Requested-With": "XMLHttpRequest" },
|
||||
onUploadProgress: (e) => {
|
||||
if (onProgress) onProgress({ percent: (e.loaded / e.total) * 100 });
|
||||
}
|
||||
};
|
||||
|
||||
// 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);
|
||||
|
||||
//Insert the document with the matching key.
|
||||
let takenat;
|
||||
if (fileType.includes("image")) {
|
||||
try {
|
||||
const exif = await exifr.parse(file);
|
||||
takenat = exif && exif.DateTimeOriginal;
|
||||
} catch (error) {
|
||||
console.log("Unable to parse image file for EXIF Data");
|
||||
}
|
||||
}
|
||||
|
||||
const documentInsert = await client.mutate({
|
||||
mutation: INSERT_NEW_DOCUMENT,
|
||||
variables: {
|
||||
docInput: [
|
||||
{
|
||||
...(jobId ? { jobid: jobId } : {}),
|
||||
...(billId ? { billid: billId } : {}),
|
||||
uploaded_by: uploaded_by,
|
||||
key: s3Key,
|
||||
type: fileType,
|
||||
extension: cloudinaryUploadResponse.data.format || extension,
|
||||
bodyshopid: bodyshop.id,
|
||||
size: cloudinaryUploadResponse.data.bytes || file.size,
|
||||
takenat
|
||||
}
|
||||
]
|
||||
}
|
||||
});
|
||||
if (!documentInsert.errors) {
|
||||
if (onSuccess)
|
||||
onSuccess({
|
||||
//TODO: Since this may go server side, we can just manage the state locally.
|
||||
uid: documentInsert.data.insert_documents.returning[0].id,
|
||||
name: documentInsert.data.insert_documents.returning[0].name,
|
||||
status: "done",
|
||||
key: documentInsert.data.insert_documents.returning[0].key
|
||||
});
|
||||
notification.open({
|
||||
type: "success",
|
||||
key: "docuploadsuccess",
|
||||
message: i18n.t("documents.successes.insert")
|
||||
});
|
||||
if (callback) {
|
||||
callback();
|
||||
}
|
||||
} else {
|
||||
if (onError) onError(JSON.stringify(documentInsert.errors));
|
||||
notification["error"]({
|
||||
message: i18n.t("documents.errors.insert", {
|
||||
message: JSON.stringify(documentInsert.errors)
|
||||
})
|
||||
});
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
//Also needs to be updated in media JS and mobile app.
|
||||
export function DetermineFileType(filetype) {
|
||||
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";
|
||||
else if (filetype.startsWith("application")) return "raw";
|
||||
|
||||
return "auto";
|
||||
}
|
||||
|
||||
function replaceAccents(str) {
|
||||
// Verifies if the String has accents and replace them
|
||||
if (str.search(/[\xC0-\xFF]/g) > -1) {
|
||||
str = str
|
||||
.replace(/[\xC0-\xC5]/g, "A")
|
||||
.replace(/[\xC6]/g, "AE")
|
||||
.replace(/[\xC7]/g, "C")
|
||||
.replace(/[\xC8-\xCB]/g, "E")
|
||||
.replace(/[\xCC-\xCF]/g, "I")
|
||||
.replace(/[\xD0]/g, "D")
|
||||
.replace(/[\xD1]/g, "N")
|
||||
.replace(/[\xD2-\xD6\xD8]/g, "O")
|
||||
.replace(/[\xD9-\xDC]/g, "U")
|
||||
.replace(/[\xDD]/g, "Y")
|
||||
.replace(/[\xDE]/g, "P")
|
||||
.replace(/[\xE0-\xE5]/g, "a")
|
||||
.replace(/[\xE6]/g, "ae")
|
||||
.replace(/[\xE7]/g, "c")
|
||||
.replace(/[\xE8-\xEB]/g, "e")
|
||||
.replace(/[\xEC-\xEF]/g, "i")
|
||||
.replace(/[\xF1]/g, "n")
|
||||
.replace(/[\xF2-\xF6\xF8]/g, "o")
|
||||
.replace(/[\xF9-\xFC]/g, "u")
|
||||
.replace(/[\xFE]/g, "p")
|
||||
.replace(/[\xFD\xFF]/g, "y");
|
||||
}
|
||||
|
||||
return str;
|
||||
}
|
||||
Reference in New Issue
Block a user