How to upload file with kintone.proxy.upload?

1 
let url = 'https:// ***********.cybozu.com/k/v1/file.json'
let authentication_dev =  btoa(' **********')
let headers = {
    'X-Cybozu-Authorization': authentication_dev,
    'Authorization': `Basic ${authentication_dev}`
};
const array = ['<a id="a"><b id="b">hey!</b></a>']
const blob = new Blob(array, {type : 'text/html'})

kintone.proxy.upload(url, 'POST', headers, {'format': 'RAW', 'value': blob}).then(function(args) {
    /*  args[0] -> body(string)
    *  args[1] -> status(number)
    *  args[2] -> headers(object)
    */
    console.log(args[1], JSON.parse(args[0]), args[2]);
}, function(error) {
    console.log(error); // Display the response body (string) from the proxy API
});

The result when i run that code:

code: "GAIA\_HM02"
id: "wFx1jrtllMOuuo8g6N6m"
message: "アップロードするHTTPリクエストの形式が正しくありません。HTTPリクエストはマルチパート形式である必要があります。"

I tried insert 'Content-Type' : 'multipart/form-data' But the result was not change.

Where is error in my code?

Thanks

2

Hello Tan,

The error says, “the HTTP request format you are uploading is incorrect. The HTTP request must be in multi-part format.”

FYI, just adding, “Content-Type’ : 'multipart/form-data”
does not make the HTTP request multi-part.

The following is an example of uploading files to a different domain using kintone.proxy.upload() that I found:

(() => {
  const downloadFile = async ({ fileKey }) => {
    const url = `/k/v1/file.json?fileKey=${fileKey}`;
    const headers = { "X-Requested-With": "XMLHttpRequest" };
    // File download cannot be done by kintone.api()
    const res = await fetch(url, { headers });
    return res.arrayBuffer();
  };

  const stringToArrayBuffer = (string) => {
    const arrayBuffer = new ArrayBuffer(string.length);
    const uint8 = new Uint8Array(arrayBuffer);
    return uint8.map((_, i) => string.charCodeAt(i)).buffer;
  };

  const mergeArrayBuffer = (ab1, ab2) => {
    const uint8 = new Uint8Array(ab1.byteLength + ab2.byteLength);
    uint8.set(new Uint8Array(ab1), 0);
    uint8.set(new Uint8Array(ab2), ab1.byteLength);
    return uint8.buffer;
  };

  const getPostData = ({ boundary, body, filename }) => {
    let headerString = "";
    headerString += `--${boundary}\r`;
    headerString += `Content-Disposition: form-data; name="file"; filename="${filename}"\r`;
    headerString += "Content-Type: application/octet-stream\r";
    headerString += "\r";

    let footerString = "";
    footerString += "\r";
    footerString += `--${boundary}--`;

    const header = stringToArrayBuffer(headerString);
    const footer = stringToArrayBuffer(footerString);

    return [header, body, footer].reduce((ac, cu) => mergeArrayBuffer(ac, cu));
  };

  kintone.events.on("app.record.index.show", async (event) => {
    // Registration destination domain and API token
    const domain = "xxx.cybozu.com";
    const apiToken = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";

    // Registration source file information
    const downloadFileKey = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
    const filename = "xxxxx.xxx"; // 例）sample.png

    const boundary = "boundary";
    const body = await downloadFile({ fileKey: downloadFileKey });
    const arrayBuffer = getPostData({ boundary, body, filename });

    const url = `https://${domain}/k/v1/file.json`;
    const params = {
      "X-Cybozu-API-Token": apiToken,
      "Content-Type": `multipart/form-data; boundary=${boundary}`,
    };
    const data = { format: "RAW", value: new Blob([arrayBuffer]) };

    try {
      const res = await kintone.proxy.upload(url, "POST", params, data);
      const { fileKey } = JSON.parse(res[0]);
    } catch (error) {
      console.error(error);
    }

    return event;
  });
})();

I hope this helps.

1 Like
3

Thank you so much, Chris.

You always give me good advice and new knownledge.