kintoneのプロフィール画像変更

index.js

(() => {
  const token = cybozu.data.REQUEST_TOKEN;

  const downloadFile = async ({ fileKey }) => {
    const res = await fetch(`/k/v1/file.json?fileKey=${fileKey}`, {
      method: "GET",
      headers: { "X-Requested-With": "XMLHttpRequest" },
    });
    return res.blob();
  };

  const uploadPhoto = async ({ arrayBuffer, fileName }) => {
    const formData = new FormData();
    formData.append(
      "file",
      new Blob([arrayBuffer], { type: "application/octet-binary" }),
      fileName
    );
    const res = await fetch("/api/blob/uploadPhoto.json", {
      method: "POST",
      headers: { "x-cybozu-requesttoken": token },
      body: formData,
    });
    return res.json();
  };

  const updateProfile = async ({ fileKey }) => {
    return fetch("/api/settings/profile.json", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        photoKey: fileKey,
        __REQUEST_TOKEN__: token,
      }),
    });
  };

  const updateProfilePhoto = async ({ field }) => {
    const { fileKey, name: fileName } = field.value[0];
    const arrayBuffer = await downloadFile({ fileKey });
    const res = await uploadPhoto({ arrayBuffer, fileName });
    await updateProfile({ fileKey: res.result.fileKey });
  };

  kintone.events.on(["app.record.detail.show"], async (event) => {
    const buttonWork = document.createElement("button");
    buttonWork.textContent = "勤務用に変更する";
    buttonWork.style["margin-right"] = "1rem";
    buttonWork.onclick = async () => {
      await updateProfilePhoto({ field: event.record.勤務用プロフィール画像 });
      window.location.reload();
    };

    const buttonBreak = document.createElement("button");
    buttonBreak.textContent = "休暇用に変更する";
    buttonBreak.style["margin-right"] = "1rem";
    buttonBreak.onclick = async () => {
      await updateProfilePhoto({ field: event.record.休暇用プロフィール画像 });
      window.location.reload();
    };

    const space = kintone.app.record.getHeaderMenuSpaceElement();
    space.append(buttonWork, buttonBreak);

    return event;
  });
})();