javascriptvue.jsaxioscloudant

How to save pdf to Cloudant


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.