First prototype of image upload working. IO-397 IO-398

2020-11-17 13:39:31 -08:00
parent 79ec14fe53
commit cd5f8af9e4
15 changed files with 395 additions and 19 deletions
--- a/util/document-upload.utility.js
+++ b/util/document-upload.utility.js
@@ -0,0 +1,184 @@
+import axios from "axios";
+import env from "../env";
+import { client } from "../graphql/client";
+import { INSERT_NEW_DOCUMENT } from "../graphql/documents.queries";
+import { axiosAuthInterceptorId } from "./CleanAxios";
+//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) => {
+  const { onError, onSuccess, onProgress } = ev;
+  const { bodyshop, jobId } = context;
+
+  let key = `${bodyshop.id}/${jobId}/${ev.file.data.name.replace(
+    /\.[^/.]+$/,
+    ""
+  )}`;
+
+  uploadToCloudinary(
+    key,
+    ev.file.type,
+    ev.file,
+    onError,
+    onSuccess,
+    onProgress,
+    context
+  );
+};
+
+export const uploadToCloudinary = async (
+  key,
+  fileType,
+  file,
+  onError,
+  onSuccess,
+  onProgress,
+  context
+) => {
+  const {
+    bodyshop,
+    jobId,
+    billId,
+    uploaded_by,
+    callback,
+    tagsArray,
+    photo,
+  } = context;
+
+  //Set variables for getting the signed URL.
+  let timestamp = Math.floor(Date.now() / 1000);
+  let public_id = key;
+  let tags = `${bodyshop.textid},${
+    tagsArray ? tagsArray.map((tag) => `${tag},`) : ""
+  }`;
+  //  let eager = process.env.REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS;
+
+  //Get the signed url.
+  let signedURLResponse;
+  try {
+    signedURLResponse = await axios.post(
+      "https://d2ea3cff6920.ngrok.io/media/sign",
+      {
+        public_id: public_id,
+        tags: tags,
+        timestamp: timestamp,
+        upload_preset: "incoming_upload",
+      }
+    );
+  } catch (error) {
+    console.log("ERROR GETTING SIGNED URL", error);
+    return;
+  }
+
+  if (signedURLResponse.status !== 200) {
+    console.log("Error Getting Signed URL", signedURLResponse.statusText);
+    if (!!onError) onError(signedURLResponse.statusText);
+    // notification["error"]({
+    //   message: i18n.t("documents.errors.getpresignurl", {
+    //     message: signedURLResponse.statusText,
+    //   }),
+    // });
+    return;
+  }
+
+  //Build request to end to cloudinary.
+  var signature = signedURLResponse.data;
+  var options = {
+    headers: { "X-Requested-With": "XMLHttpRequest" },
+    onUploadProgress: (e) => {
+      if (!!onProgress) onProgress({ percent: (e.loaded / e.total) * 100 });
+    },
+  };
+  const formData = new FormData();
+
+  console.log("Sending!", {
+    uri: photo.uri,
+    type: fileType,
+    name: file.data.name,
+  });
+  formData.append("file", {
+    uri: photo.uri,
+    type: fileType,
+    name: file.data.name,
+  });
+  console.log("Applying lower quality transforms.");
+  formData.append("upload_preset", "incoming_upload");
+
+  formData.append("api_key", env.REACT_APP_CLOUDINARY_API_KEY);
+  formData.append("public_id", public_id);
+  formData.append("tags", tags);
+  formData.append("timestamp", timestamp);
+  formData.append("signature", signature);
+
+  //Upload request to Cloudinary
+  let cloudinaryUploadResponse;
+  try {
+    cloudinaryUploadResponse = await cleanAxios.post(
+      `${env.REACT_APP_CLOUDINARY_ENDPOINT}/upload`,
+      formData,
+      {
+        ...options,
+      }
+    );
+    console.log("Cloudinary Upload Response", cloudinaryUploadResponse.data);
+  } catch (error) {
+    console.log("CLOUDINARY error", error, cloudinaryUploadResponse);
+  }
+
+  if (cloudinaryUploadResponse.status !== 200) {
+    console.log(
+      "Error uploading to cloudinary.",
+      cloudinaryUploadResponse.statusText,
+      cloudinaryUploadResponse
+    );
+    if (!!onError) onError(cloudinaryUploadResponse.statusText);
+    // notification["error"]({
+    //   message: i18n.t("documents.errors.insert", {
+    //     message: cloudinaryUploadResponse.statusText,
+    //   }),
+    // });
+    return;
+  }
+
+  //Insert the document with the matching key.
+  const documentInsert = await client.mutate({
+    mutation: INSERT_NEW_DOCUMENT,
+    variables: {
+      docInput: [
+        {
+          jobid: jobId,
+          uploaded_by: uploaded_by,
+          key: key,
+          billid: billId,
+          type: fileType,
+        },
+      ],
+    },
+  });
+  if (!documentInsert.errors) {
+    if (!!onSuccess)
+      onSuccess({
+        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["success"]({
+    //   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(JSON.stringify(documentInsert.errors)),
+    //   }),
+    // });
+    return;
+  }
+};