BOD-25 BOD-24 Uploading to cloudinary + thumbnail generation
This commit is contained in:
Patrick Fic
@@ -1,7 +1,7 @@
|
||||
import { useMutation } from "@apollo/react-hooks";
|
||||
import { notification } from "antd";
|
||||
import axios from "axios";
|
||||
import React, { useRef } from "react";
|
||||
import { useMutation } from "@apollo/react-hooks";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import Resizer from "react-image-file-resizer";
|
||||
import { connect } from "react-redux";
|
||||
@@ -11,7 +11,6 @@ import {
|
||||
selectBodyshop,
|
||||
selectCurrentUser,
|
||||
} from "../../redux/user/user.selectors";
|
||||
import { generateCdnThumb } from "../../utils/DocHelpers";
|
||||
import DocumentsUploadComponent from "./documents-upload.component";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
@@ -21,6 +20,7 @@ const mapStateToProps = createStructuredSelector({
|
||||
|
||||
export function DocumentsUploadContainer({
|
||||
jobId,
|
||||
tagsArray,
|
||||
invoiceId,
|
||||
currentUser,
|
||||
bodyshop,
|
||||
@@ -37,10 +37,7 @@ export function DocumentsUploadContainer({
|
||||
//If JPEG, resize and upload.
|
||||
//TODO If this is just an invoice job? Where to put it?
|
||||
let key = `${bodyshop.id}/${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 {
|
||||
if (ev.file.type.includes("image")) {
|
||||
Resizer.imageFileResizer(
|
||||
ev.file,
|
||||
2500,
|
||||
@@ -55,6 +52,8 @@ export function DocumentsUploadContainer({
|
||||
},
|
||||
"blob"
|
||||
);
|
||||
} else {
|
||||
uploadToS3(key, ev.file.type, ev.file, onError, onSuccess, onProgress);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -67,18 +66,20 @@ export function DocumentsUploadContainer({
|
||||
onProgress
|
||||
) => {
|
||||
let timestamp = Math.floor(Date.now() / 1000);
|
||||
console.log("timestamp", timestamp);
|
||||
//Actually upload to cloudinary
|
||||
|
||||
let public_id = fileName;
|
||||
let tags = `${bodyshop.textid},${
|
||||
tagsArray ? tagsArray.map((tag) => `{tag},`) : ""
|
||||
}`;
|
||||
let eager = "w_200,h_200,c_thumb";
|
||||
axios
|
||||
.post("/media/upload", {
|
||||
eager: "w_200,h_200,c_fill",
|
||||
public_id: timestamp,
|
||||
.post("/media/sign", {
|
||||
eager: eager,
|
||||
public_id: public_id,
|
||||
tags: tags,
|
||||
timestamp: timestamp,
|
||||
})
|
||||
.then((response) => {
|
||||
var signature = response.data;
|
||||
console.log("signature", signature);
|
||||
var options = {
|
||||
headers: { "X-Requested-With": "XMLHttpRequest" },
|
||||
onUploadProgress: (e) => {
|
||||
@@ -87,164 +88,76 @@ export function DocumentsUploadContainer({
|
||||
};
|
||||
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("eager", eager);
|
||||
formData.append("api_key", process.env.REACT_APP_CLOUDINARY_API_KEY);
|
||||
formData.append("public_id", public_id);
|
||||
formData.append("tags", tags);
|
||||
formData.append("timestamp", timestamp);
|
||||
formData.append("signature", signature);
|
||||
|
||||
axios
|
||||
.post(
|
||||
"https://api.cloudinary.com/v1_1/bodyshop/image/upload",
|
||||
`${process.env.REACT_APP_CLOUDINARY_ENDPOINT}/upload`,
|
||||
formData,
|
||||
options
|
||||
)
|
||||
.then((response) => {
|
||||
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);
|
||||
// }
|
||||
// });
|
||||
|
||||
insertNewDocument({
|
||||
variables: {
|
||||
docInput: [
|
||||
{
|
||||
jobid: jobId,
|
||||
uploaded_by: currentUser.email,
|
||||
url: "c",
|
||||
thumb_url: "c",
|
||||
key: fileName,
|
||||
invoiceid: invoiceId,
|
||||
type: fileType,
|
||||
},
|
||||
],
|
||||
},
|
||||
}).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();
|
||||
}
|
||||
if (onChange) {
|
||||
//Used in a form.
|
||||
onChange(UploadRef.current.state.fileList);
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch((error) => console.log("error", error));
|
||||
// .catch((error) => {
|
||||
// onError(error);
|
||||
// notification["error"]({
|
||||
// message: t("documents.errors.insert", {
|
||||
// message: JSON.stringify(error),
|
||||
// }),
|
||||
// });
|
||||
// });
|
||||
.catch((error) => {
|
||||
onError(error);
|
||||
notification["error"]({
|
||||
message: t("documents.errors.insert", {
|
||||
message: JSON.stringify(error),
|
||||
}),
|
||||
});
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log("error", error);
|
||||
// notification["error"]({
|
||||
// message: t("documents.errors.getpresignurl", {
|
||||
// message: JSON.stringify(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}
|
||||
|
||||
Reference in New Issue
Block a user