Overview

Using a provided code sample, developers can take a Base64 string and upload it programmatically as a profile photo. The provided code example takes the Base64 data, converts it to a blob, and then converts it to a File object. Then, this photo is uploaded to Igloo and attached to the currently authenticated user's profile using API calls.

For more information about profile photos, and recommended photo sizes and file types for profile photos, please see the Customer Care article Profile Photos.

Considerations and Caveats

Deploying to Production

Since there is no validation present in this code, this code is intended to be an example and is not intended to be deployed into a production environment.

Code Sample for Uploading a Profile Photo from Base64

Here is a JavaScript code sample that can be used to upload a profile photo from a Base64 string for the currently authenticated and logged in user:

/**
 * @name uploadBase64ProfilePhoto
 * @description This method takes a base64 image and converts it to a blob, and then converts it into a File object to be uploaded as a user's profile photo
 */
let igFiles = {
  uploadBase64ProfilePhoto: function (base64Image, fileName) {
    console.log("Working...");

 /*this function takes the Base64 image and converts it into a blob for further processing*/
    const b64toBlob = (b64Data, contentType = "", sliceSize = 512) => {
      const byteCharacters = atob(b64Data);
      const byteArrays = [];

      /*break the Base64 image up into smaller pieces and create an array of bytes to create the blob*/
      for (
        let offset = 0;
        offset < byteCharacters.length;
        offset += sliceSize
      ) {
        const slice = byteCharacters.slice(offset, offset + sliceSize);
        const byteNumbers = new Array(slice.length);
        for (let i = 0; i < slice.length; i++) {
          byteNumbers[i] = slice.charCodeAt(i);
        }
        const byteArray = new Uint8Array(byteNumbers);
        byteArrays.push(byteArray);
      }

      /*create the blob from the data*/
      const blob = new Blob(byteArrays, { type: contentType });
      return blob;
    };

    /*identify the content type from the Base64 string*/
    /*it's important to provide the entire Base64 string when uploading content using this function, since the complete string provides information about the content type which the function uses*/
    let contentType = base64Image.split(";")[0].split(":")[1].trim();

    /*identify the image portion of the Base64 string*/
    let content = base64Image.split(",")[1].trim();

    /*validate the MIME type*/
    if (
      contentType === "image/jpg" ||
      contentType === "image/jpeg" ||
      contentType === "image/png" ||
      contentType === "image/gif"
      /*uncomment to allow additional file type support*/
      // || contentType === "image/svg" ||
      // contentType === "image/webp"
    ) {
      console.log("Uploading: ", contentType);

      /*use the above function to take the Base64 image, and convert it to a blob*/
      let blob = b64toBlob(content, contentType);

      /*create the File image object out of the blob*/
      /*at this step, the Base64 image is now in a File format, and we can proceed with the subsequent API calls normally*/
      const imageFile = new File([blob], "name", { type: contentType });

      /*begin to upload the file to use with the Attachment API*/
      this.uploadProfilePhoto(imageFile, fileName, contentType);
    } else {
      /*not a supported MIME type, output an error to the console*/
      console.log(
        "The specified content type is invalid. Please upload either a .jpg, a .png, or a .gif image."
      );
    }
  },

  /**
   * @name uploadProfilePhoto
   * @description This method takes a file and attaches it to the currently logged in user's profile using Attachment API calls
   */
  uploadProfilePhoto: function (imageFile, fileName, contentType) {
    /*get the community key*/
    const communityKey = window.parent.Igloo.community.key;

    /*First: create an upload entry*/
    /** Initiate the file upload */

    const config = {
      method: "post",
      url: `/.api2/api/v1/communities/${communityKey}/attachments`,
      data: {
        contentLength: imageFile.size,
        contentType: contentType,
        name: fileName,
      },
    };

    axios(config)
      .then(function (response) {
        /*get the attachment key*/
        let header = response.headers.location.split("/");
        const attachmentKey = header[header.length - 1];

        uploadFileToAttachmentEntry(imageFile, contentType, communityKey, attachmentKey);
      })
      .catch(function (error) {
        console.log(error);
      });

    /**
     * @name uploadFileToAttachmentEntry
     * @description This method will upload a file to the created attachment entry
     */
    const uploadFileToAttachmentEntry = (imageFile, contentType, communityKey, attachmentKey) => {
      /*Second: upload the file's content to the created entry*/

      let imageSize = imageFile.size;
      let formattedContentRange = `bytes 0-${parseInt(imageSize) - 1}/${imageSize}`;

      const config = {
        method: "patch",
        url: `/.api2/api/v1/communities/${communityKey}/attachments/uploads/${attachmentKey}`,
        headers: {
          "Content-Range": formattedContentRange,
          contentLength: imageSize,
          "Content-Type": contentType,
        },
        data: imageFile,
      };

      axios(config)
        .then(function (response) {
          console.log(response);
          changeProfilePhoto(communityKey, attachmentKey);
        })
        .catch(function (error) {
          console.log(error);
        });
    };

    /**
     * @name changeProfilePhoto
     * @description This method will take the attachment, and set the image as the current user's profile photo
     */
    const changeProfilePhoto = (communityKey, attachmentKey) => {
      /*Third: make the uploaded file the current user's profile photo*/

      /*identify the current user's ID*/
      const objectID = window.parent.Igloo.currentUser.id;

      const config = {
        method: "post",
        url: `/.api2/api/v1/communities/${communityKey}/attachments/${attachmentKey}/association/${objectID}?type=ProfilePhoto`,
      };

      axios(config)
        .then(function (response) {
          console.log(response);
          console.log("Profile photo updated.");
        })
        .catch(function (error) {
          console.log(error);
        });
    };
  },
};

Usage

When this script is present in your application, you can upload a profile photo using the following code snippet:

/**
 * @description Upload a profile photo from Base64
 * @param {*} base64Image Base64 string of the image
 * @param {*} fileName The intended file name of the image (e.g. image.png)
*/
igFiles.uploadBase64ProfilePhoto(base64Image, fileName);

Related Examples

For a detailed overview of the API endpoints that handle the process of uploading a profile photo (as seen in the above code snippet), please see the Developer Knowledge Base article Profile Photos.

For a related code example that takes a Base64 string and converts it to be uploaded in a file folder, please see Uploading Files from Base64.