How to send localhost Blob(Clipboard Image Data) send to other server (Google Apps Script)

Question

How to send localhost Blob(Clipboard Image Data) send to other server (Google Apps Script)

113 Views Asked by 1min At 02 January 2024 at 08:43

I want to send Blob(Clipboard Image Data, Client Javascript) to other server (Google Apps Script) for storing in Google Drive.

client and server is not same domain.

I try below code but It's not working.

google apps script side, e.postData parameter is always return undefined.

What should I do? I don't even know whether it's a javascript fetch problem or a server problem.

Must JavaScript blob data be converted as raw texts(String) before sending?

My English is bad,.

please show me answer code.

in javascript, html // localhost environment because this html, javascript for chrome extension.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      window.addEventListener("DOMContentLoaded", function () {
        document.querySelector("#test").addEventListener("click", async () => {
          try {
            const permission = await navigator.permissions.query({
              name: "clipboard-read",
            });

            // permission allowed
            if (permission.state === "granted") {
              const dataTransfer = await navigator.clipboard.read();

              // get item from clipboard
              for (const item of dataTransfer) {
                const isImage = item.types.some((type) => type === "image/png");

                if (!isImage) {
                  continue;
                }

                // get Blob from clipboardItem
                const blob = await item.getType("image/png");

                var formData = new FormData();
                formData.append("blobData", blob);

                fetch("my_google_apps_script_url", {
                  method: "POST",
                  body: formData,
                })
                  .then((response) => response.json())
                  .then((data) => {
                    console.log("Response from Google Apps Script:", data);
                  })
                  .catch((error) => {
                    console.error("Error calling Google Apps Script:", error);
                  });
                break;
              }
            } else {
              console.log("not allowed permission.");
            }
          } catch (error) {
            console.error("clipboard read error:", error);
          }
        });
      });
    </script>
  </head>
  <body>
    <button id="test">test button</button>
  </body>
</html>

in google Apps Script

 function doPost(e) {
   try {
       e.postData is null

//     I will get blob from e.postData and store in my google drive.

     return ContentService.createTextOutput(JSON.stringify({ success: true }))
       .setMimeType(ContentService.MimeType.JSON);
   } catch (error) {
     console.error('Error processing Blob data:', error);


     return ContentService.createTextOutput(JSON.stringify({ success: false, error: error.message }))
       .setMimeType(ContentService.MimeType.JSON);
   }
 }

Original Q&A

There are 1 best solutions below

**1min** · Accepted Answer · 2024-01-04T09:02:02.160000

I Success below Way

front Side

const blob = await item.getType("image/png");

          let reader = new FileReader();

          reader.onload = function (event) {
            let base64EndcodedArr = event.target.result.split(",");
            let metaDataStr = base64EndcodedArr[0];
            let encodedData = base64EndcodedArr[1];

            console.log(event.target.result);

            fetch(
              "my_google_apps_script_url",
              {
                method: "POST",
                body: JSON.stringify({
                  metaData: metaDataStr,
                  data: encodedData,
                }),
              }
            )
              .then((response) => response.json())
              .then((data) => {
                console.log("Response from Google Apps Script:", data);
              })
              .catch((error) => {
                console.error("Error calling Google Apps Script:", error);
              });
          };

          reader.readAsDataURL(blob);

Server Side

function doPost(e) {
  try {
    let json = JSON.parse(e.postData.contents);
    var data = Utilities.base64Decode(json.data);
    var fileName = Utilities.getUuid() + ".png";
    var blob = Utilities.newBlob(data, 'image/png', fileName);
    var linkUrl = saveBlobImageToDrive(blob);
    // 성공 응답 반환
    return ContentService.createTextOutput(JSON.stringify({ success: true, link : linkUrl }))
      .setMimeType(ContentService.MimeType.JSON);
  } catch (error) {
    console.error('Error processing Blob data:', error);

    // 오류 응답 반환
    return ContentService.createTextOutput(JSON.stringify({ success: false, error: error.message }))
      .setMimeType(ContentService.MimeType.JSON);
  }
}

// 클라이언트에서 전송된 Blob 이미지 데이터를 Google 드라이브에 저장하고 파일로 로깅하는 함수
function saveBlobImageToDrive(blobImageData) {
    // Blob 데이터를 Google 드라이브에 저장할 폴더 ID
    var folderId = 'my_folderId'; // 실제 폴더 ID로 변경해야 합니다.

    // Google 드라이브에 저장
    var file = DriveApp.getFolderById(folderId).createFile(blobImageData);

    file.setSharing(DriveApp.Access.ANYONE_WITH_LINK, DriveApp.Permission.VIEW);
    var shareableLink = file.getUrl() + '/view?usp=sharing';

    return shareableLink;
}

How to send localhost Blob(Clipboard Image Data) send to other server (Google Apps Script)

in javascript, html // localhost environment because this html, javascript for chrome extension.

in google Apps Script

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in GOOGLE-APPS-SCRIPT

Related Questions in GOOGLE-DRIVE-API

Related Questions in FETCH-API

Related Questions in GOOGLE-APPS-SCRIPT-API

Trending Questions

Popular # Hahtags

Popular Questions