[FIXED] How to save pdf to Cloudant

Issue

I want to save the pdf to Cloudant. With the code below, I get an error opening the Attachment in Cloudant. "An error was encountered when processing this file" I can put fake string data in the "._attachments[name].data" field and it will save.

The Cloudant docs say the data content needs to be in base64 and that is what I am attempting. Cloudant says "The content must be provided by using BASE64 representation"

 function saveFile() {
      var doc = {};
      var blob = null;
      //fileName is from the input field model data
      var url = fileName;
    
  fetch(url)
    .then((r) => r.blob())
    .then((b) => {
      blob = b;
      return getBase64(blob);
    })
    .then((blob) => {
      console.log(blob);
      let name = url._rawValue.name;

      doc._id = "testing::" + new Date().getTime();
      doc.type = "testing attachment";

      doc._attachments = {};
      doc._attachments[name] = {};
      doc._attachments[name].content_type = "application/pdf";
      doc._attachments[name].data = blob.split(",")[1];
      console.log("doc: ", doc);
    })
    .then(() => {
      api({
        method: "POST",
        url: "/webdata",
        auth: {
          username: process.env.CLOUDANT_USERNAME,
          password: process.env.CLOUDANT_PASSWORD,
        },
        data: doc,
      })
        .then((response) => {
          console.log("result: ", response);

          alert("Test has been submitted!");
        })
        .catch((e) => {
          console.log("e: ", e);
          alert(e);
        });
      console.log("finished send test");
    });
}
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = (error) => reject(error);
  });
}

any ideas? Thanks

Solution

I found out I was doing too much to the PDF file. No need to make to blob then convert to base64.

Only convert to base64.

async function sendFiles() {
  try {
      const url = fileName;
      const doc = {};
      doc._attachments = {};
      doc._id = "testing::" + new Date().getTime();
      doc.type = "testing attachment";

    for (let item of url._value) {
     
      const blob2 = await getBase64(item);

      let name = item.name;
      doc._attachments[name] = {};
      doc._attachments[name].content_type = item.type;
      doc._attachments[name].data = blob2.split(",")[1];
     
    }
    const response = await api({
      method: "POST",
      url: "/webdata",
      data: doc,
    });
   
  } catch (e) {
    console.log(e);
    throw e; // throw error so caller can see the error
  }
  console.log("finished send test");
  fileName.value = null;
}
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = (error) => reject(error);
  });
}

This works for me.

Answered By - Morgan Hayes

Answer Checked By - Timothy Miller (PHPFixing Admin)