Upload with react generated pdf to google drive

In my application I am creating a pdf file using react-pdf. I want the user to be able to upload this generated pdf to google drive.. i Have tried so far with with blob , but I had no succsess. Happy for any help!! Thank you !

    const doc = <MyDocument req={props.data} />;
    const asPdf = pdf([]); 
    asPdf.updateContainer(doc);
    const blob = await asPdf.toBlob();

    
    const boundary = "foo_bar_baz";
    const delimiter = "\r\n--" + boundary + "\r\n";
    const close_delim = "\r\n--" + boundary + "--";
    var fileName = "mydocument.pdf";
    var fileData =  blob;
    var contentType = "application/pdf";
    var metadata = {
      name: fileName,
      mimeType: contentType,
    };



    var multipartRequestBody =
      delimiter +
      "Content-Type: application/json; charset=UTF-8\r\n\r\n" +
      JSON.stringify(metadata) +
      delimiter +
      "Content-Type: " +
      contentType +
      "\r\n\r\n" +
      fileData +
      "\r\n" +
      close_delim;

    console.log(multipartRequestBody);
    var request = window.gapi.client.request({
      path: "https://www.googleapis.com/upload/drive/v3/files",
      method: "POST",
      params: { uploadType: "multipart" },
      headers: {
        "Content-Type": "multipart/related; boundary=" + boundary + "",
      },
      body: multipartRequestBody,
    });
    request.execute(function (file) {
      console.log(file);
      console.log(fileData)

    });

Solution

Modification point:

In this case, I would like to propose to use the base64 data instead of the blob.

When this point is reflected to your script, it becomes as follows.

Modified script:

From:

var multipartRequestBody =
  delimiter +
  "Content-Type: application/json; charset=UTF-8\r\n\r\n" +
  JSON.stringify(metadata) +
  delimiter +
  "Content-Type: " +
  contentType +
  "\r\n\r\n" +
  fileData +
  "\r\n" +
  close_delim;

To:

// I added below function.
const base64 = blob => new Promise((resolve, reject) => {
  const fr = new FileReader();
  fr.onload = () => resolve(fr.result.split(",").pop());
  fr.onerror = () => reject(fr.error);
  fr.readAsDataURL(blob);
});
var multipartRequestBody =
  delimiter +
  "Content-Type: application/json; charset=UTF-8\r\n\r\n" +
  JSON.stringify(metadata) +
  delimiter +
  "Content-Type: " + contentType + "\r\n" +
  'Content-Transfer-Encoding: base64\r\n\r\n' +  // Added
  await base64(blob) +  // Modified
  "\r\n" +
  close_delim;

I used FileReader for converting the blob to the base64 data.

Note:

In this modification, it supposes that blob of const blob = await asPdf.toBlob(); is the valid blob of PDF data. Please be careful this.
And, this answer supposes that you have already been able to upload a file using Drive API. Please be careful this.

Reference:

FileReader