Docs

updateOrganizationLogo()

Updates the organization's logo.

function updateOrganizationLogo: (organizationId: string, params: UpdateLogoParams) => Promise<Organization>;
  • Name
    file
    Type
    Blob | File
    Description

    The file to upload as the organization's logo.

  • Name
    uploaderUserId
    Type
    string
    Description

    The ID of the user uploading the logo.

Example

The following example shows two files:

  1. A Next.js Server Action that allows you to update the organization's logo.
  2. A Next.js Client Component that allows you to upload the file.
app/actions/update-org-logo.ts
'use server';

import { clerkClient, auth } from '@clerk/nextjs/server';

export async function updateOrgLogo(formData: FormData) {
  const { userId, orgId } = auth();

  if (!userId) {
    return Response.json(
      { message: 'No user found. Please sign in.' },
      { status: 401 }
    );
  }

  if (!orgId) {
    return Response.json(
      {
        message:
          'No active organization found. Please set an organization as active.',
      },
      { status: 403 }
    );
  }

  const organizationId = orgId;
  const uploaderUserId = userId;

  const params = {
    file: formData.get('file') as File,
    uploaderUserId,
  };

  const response = await clerkClient.organizations.updateOrganizationLogo(
    organizationId,
    params
  );

  console.log(response);
}
/*
_Organization {
  id: 'org_123',
  name: 'test',
  slug: 'test',
  imageUrl: 'https://img.clerk.com/eyJ...',
  hasImage: true,
  createdBy: 'user_123',
  createdAt: 1714572514789,
  updatedAt: 1715633676620,
  publicMetadata: {},
  privateMetadata: {},
  maxAllowedMemberships: 1,
  adminDeleteEnabled: true,
  membersCount: undefined
}
*/
app/update-org-logo/page.tsx
'use client';
import { updateOrgLogo } from '../utils/updateOrgLogo';

export default function Page() {
  return (
    <div className="flex justify-center py-24">
      <h1>Update Org Logo</h1>
      <form action={updateOrgLogo}>
        <input type="file" name="file" />
        <button>Upload</button>
      </form>
    </div>
  );
}

Backend API (BAPI) endpoint

This method in the SDK is a wrapper around the BAPI endpoint PUT/organizations/{organization_id}/logo. See the BAPI reference for more details.

Feedback

What did you think of this content?