BOD-69 Testing out code for Cloudinary + swapping out resizer.
This commit is contained in:
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user