Request of multipart/form-data with Simple Request Body using Google Apps Script

17 Oct 2020, 11:00

GasTips

This is a sample script of the request of multipart/form-data with a simple request body using Google Apps Script. I hope that the users will easy to use Class UrlFetchApp by this report.

This report is the updated post of “Multipart-POST Request Using Google Apps Script”.

Description

I had already reported about this at this report. In that case, it was required to create a bit complicated request body to request multipart/form-data. Today, by a comment, I could notice the sample script of Class UrlFetchApp in the official document had been updated. By this, I thought that multipart/form-data will be requested with a simple request body. In this report, I would like to introduce a sample script for requesting multipart/form-data with a simple request body. But I’m not sure whether this request got to be able to be done by the internal update of Class UrlFetchApp.

Sample script

In this sample script, the CSV and XLSX files can be converted to Google Spreadsheet using Drive API v3 with UrlFetchApp. You can see the sample script for directly creating the request body of multipart/form-data at “2. Convert Excel files To Spreadsheets On Google Drive Using Drive API v3.” of this report. In this sample script, the same request is run with the simple request body. Before you use this script, please enable Drive API at Advanced Google services.

function myFunction() {
  const fileId = "### file ID on Google Drive ###"; // Please set the file ID of CSV or XLSX file.
  const metadata = {
    name: "sampleFile",
    mimeType: "application/vnd.google-apps.spreadsheet",
    parents: ["### folder ID ###"], // If you want to put the converted Spreadsheet to the specific folder, please use this.
  };
  const fields = "id,mimeType,name";

  const payload = {
    metadata: Utilities.newBlob(JSON.stringify(metadata), "application/json"),
    file: DriveApp.getFileById(fileId).getBlob(),
  };
  const options = {
    method: "post",
    payload: payload,
    headers: { authorization: "Bearer " + ScriptApp.getOAuthToken() },
  };
  const url =
    "https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart&fields=" +
    encodeURIComponent(fields);
  const res = UrlFetchApp.fetch(url, options).getContentText();
  console.log(res);

  // DriveApp.createFile(blob)  // This is used for automatically detecting the scope of "https://www.googleapis.com/auth/drive".
}

When this script is run, the CSV and XLSX file are converted to Google Spreadsheet.
At UrlFetchApp, it seems that when the metadata is sent as the blob including the mimeType of application/json like metadata: Blob, the string of object metadata can be sent to the form as application/json. And when the file is sent as file: Blob, the file is sent as the file.

Result

When above script is run, the following response is returned.

{
  "id": "###",
  "name": "sampleFile",
  "mimeType": "application/vnd.google-apps.spreadsheet"
}

Note

When above sample script is converted to the curl command, it becomes as follows.

$ curl -X POST -L \
     -H "Authorization: Bearer ### access token ###" \
     -F "metadata={ \
                  name : '### uploaded filename on Google Drive ###', \
                  mimeType : 'application/vnd.google-apps.spreadsheet' \
                  };type=application/json;charset=UTF-8" \
     -F "file=@### Excel file ###;type=application/vnd.ms-excel" \
     "https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart"

As other sample, when you want to send the file data to the file, you can use the following simple script.

const url = "###";
const res = UrlFetchApp.fetch(url, {
  method: "post",
  payload: { file: DriveApp.getFileById("### file ID ###").getBlob() },
}).getContentText();

In this case, the value is sent to {"files": {"file": "### data ###"}}.

As other sample, when you want to send the JSON object to the form, you can use the following simple script.
```
const url = "###";
const res = UrlFetchApp.fetch(url, {
  method: "post",
  payload: { key1: "value1", key2: "value2" },
}).getContentText();
```
- In this case, the value is sent to {"form": {"key1": "value1", "key2": "value2"}}.

IMPORTANT

When Blob is used to the payload of UrlFetchApp, it seems that when the Blob has no name, the request is not done as files with multipart/form-data. Please be careful about this.
- In the case of the following script, the value is sent as form with multipart/form-data.
```
  const res = UrlFetchApp.fetch(OPTIMIZER_URL, { payload: { key: Utilities.newBlob("value") } });
```
- In the case of the following script, the value is sent as files with multipart/form-data.
```
  const res = UrlFetchApp.fetch(OPTIMIZER_URL, { payload: { key: Utilities.newBlob("value").setName("samplename") } });
```

References

Class UrlFetchApp
- This is the official document.
Multipart-POST Request Using Google Apps Script
- This is the report I posted before in this blog.
Perform a multipart upload