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

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">