feat(clerk-js): User.setProfileImage accepts file a Base64 string

Sets Content type to be `application/octet-stream`

.changeset/silver-days-sit.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Add support for dataURLs in User.setProfileImage

packages/clerk-js/src/core/fapiClient.ts

@@ -173,16 +173,26 @@ export default function createFapiClient(clerkInstance: Clerk): FapiClient {
       sessionId: clerkInstance.session?.id,
     });
 
+    // Initialize the headers if they're not provided.
     if (!requestInit.headers) {
       requestInit.headers = new Headers();
     }
 
-    // In case FormData is provided, we don't want to mess with the headers,
-    // because for file uploads the header is properly set by the browser.
-    if (method !== 'GET' && !(body instanceof FormData)) {
-      requestInit.body = qs.stringify(body, { encoder: camelToSnakeEncoder, indices: false });
+    // Set the default content type for non-GET requests.
+    // Skip for FormData, because the browser knows how to construct it later on.
+    // Skip if the content-type header has already been set, somebody intends to override it.
+    // @ts-ignore
+    if (method !== 'GET' && !(body instanceof FormData) && !requestInit.headers.has('content-type')) {
       // @ts-ignore
-      requestInit.headers.set('Content-Type', 'application/x-www-form-urlencoded');
+      requestInit.headers.set('content-type', 'application/x-www-form-urlencoded');
+    }
+
+    // Massage the body depending on the content type if needed.
+    // Currently, this is needed only for form-urlencoded, so that the values reach the server in the form
+    // foo=bar&baz=bar&whatever=1
+    // @ts-ignore
+    if (requestInit.headers.get('content-type') === 'application/x-www-form-urlencoded') {
+      requestInit.body = qs.stringify(body, { encoder: camelToSnakeEncoder, indices: false });
     }
 
     const beforeRequestCallbacksResult = await runBeforeRequestCallbacks(requestInit);

packages/clerk-js/src/core/resources/Image.ts

@@ -9,8 +9,13 @@ export class Image extends BaseResource implements ImageResource {
 
   static async create(path: string, body: any = {}): Promise<ImageResource> {
     let fd = body;
-
-    if (body['file']) {
+    let headers;
+    if (typeof body['file'] === 'string') {
+      fd = body['file'];
+      headers = new Headers({
+        'Content-Type': 'application/octet-stream',
+      });
+    } else if (body['file']) {
       fd = new FormData();
       fd.append('file', body['file']);
     }
@@ -20,6 +25,7 @@ export class Image extends BaseResource implements ImageResource {
         path,
         method: 'POST',
         body: fd,
+        headers,
       })
     )?.response as unknown as ImageJSON;
 

packages/types/src/user.ts

@@ -107,7 +107,7 @@ export interface UserResource extends ClerkResource {
 export type CreateEmailAddressParams = { email: string };
 export type CreatePhoneNumberParams = { phoneNumber: string };
 export type CreateWeb3WalletParams = { web3Wallet: string };
-export type SetProfileImageParams = { file: Blob | File | null };
+export type SetProfileImageParams = { file: Blob | File | string | null };
 export type CreateExternalAccountParams = {
   strategy: OAuthStrategy;
   redirectUrl?: string;