@amityco/ts-sdk-react-native 6.22.1-600ab29.0 → 6.22.1-b0a1854.0

package/src/communityRepository/observers/getCommunities.ts

@@ -1,31 +1,7 @@
-/* eslint-disable no-use-before-define */
-import { getResolver } from '~/core/model';
-import { dropFromCache, pullFromCache, pushToCache } from '~/cache/api';
+import { dropFromCache } from '~/cache/api';
 import { getActiveClient } from '~/client/api';
-import {
-  createQuery,
-  filterByCommunityMembership,
-  filterByPropEquality,
-  filterByStringComparePartially,
-  queryOptions,
-  runQuery,
-  sortByDisplayName,
-  sortByFirstCreated,
-  sortByLastCreated,
-} from '~/core/query';
-import {
-  COLLECTION_DEFAULT_CACHING_POLICY,
-  COLLECTION_DEFAULT_PAGINATION_LIMIT,
-  ENABLE_CACHE_MESSAGE,
-} from '~/utils/constants';
-import { CACHE_SHORTEN_LIFESPAN } from '~/cache/utils';
-import { onCommunityCreated, onCommunityDeleted, onCommunityUpdated } from '../events';
-import {
-  onCommunityJoined,
-  onCommunityLeft,
-  onCommunityUserChanged,
-} from '../communityMembership/events';
-import { queryCommunities } from '../api/queryCommunities';
+import { ENABLE_CACHE_MESSAGE } from '~/utils/constants';
+import { CommunityLiveCollectionController } from './getCommunities/CommunitiesLiveCollectionController';
 
 /* begin_public_function
   id: community.query
@@ -53,7 +29,7 @@ export const getCommunities = (
   callback: Amity.LiveCollectionCallback<Amity.Community>,
   config?: Amity.LiveCollectionConfig,
 ) => {
-  const { log, cache, userId } = getActiveClient();
+  const { log, cache } = getActiveClient();
 
   if (!cache) {
     console.log(ENABLE_CACHE_MESSAGE);
@@ -62,130 +38,11 @@ export const getCommunities = (
   const timestamp = Date.now();
   log(`getCommunities(tmpid: ${timestamp}) > listen`);
 
-  const { limit: queryLimit, ...queryParams } = params;
+  const communitiesLiveCollection = new CommunityLiveCollectionController(params, callback);
+  const disposers = communitiesLiveCollection.startSubscription();
 
-  const limit = queryLimit ?? COLLECTION_DEFAULT_PAGINATION_LIMIT;
-  const { policy = COLLECTION_DEFAULT_CACHING_POLICY } = config ?? {};
+  const cacheKey = communitiesLiveCollection.getCacheKey();
 
-  const disposers: Amity.Unsubscriber[] = [];
-  const cacheKey = ['community', 'collection', queryParams as Amity.Serializable];
-
-  const responder = (data: Amity.CommunityLiveCollectionCache) => {
-    let communities: Amity.Community[] =
-      data.data
-        .map(communityId => pullFromCache<Amity.Community>(['community', 'get', communityId])!)
-        .filter(Boolean)
-        .map(({ data }) => data) ?? [];
-
-    communities = filterByStringComparePartially(communities, 'displayName', params.displayName);
-
-    if (!params.includeDeleted) {
-      communities = filterByPropEquality(communities, 'isDeleted', false);
-    }
-
-    if (params.categoryId) {
-      communities = communities.filter(c => c.categoryIds?.includes(params.categoryId!));
-    }
-
-    if (params.tags) {
-      communities = communities.filter(c => c.tags?.some(t => params.tags?.includes(t)));
-    }
-
-    if (params.membership && userId) {
-      communities = filterByCommunityMembership(communities, params.membership, userId);
-    }
-
-    const sortBy = params.sortBy || 'lastCreated';
-
-    if (sortBy === 'lastCreated' || sortBy === 'firstCreated') {
-      communities = communities.sort(
-        sortBy === 'lastCreated' ? sortByLastCreated : sortByFirstCreated,
-      );
-    }
-
-    /*
-     * The server returns communities with empty | null displayName's first before
-     * returning sorted list of communities with displayNames
-     *
-     * This section needs to be updated as displayNames can be null as well
-     */
-    if (sortBy === 'displayName') {
-      communities = communities
-        // this needs to be aligned with the backend data type
-        .map(c => (c.displayName ? c : { ...c, displayName: '' }))
-        // @ts-ignore
-        .sort(sortByDisplayName);
-    }
-
-    callback({
-      onNextPage: onFetch,
-      data: communities,
-      hasNextPage: !!data.params?.page,
-      loading: data.loading,
-      error: data.error,
-    });
-  };
-
-  const realtimeRouter = (_: Amity.CommunityActionType) => (community: Amity.Community) => {
-    const collection = pullFromCache<Amity.CommunityLiveCollectionCache>(cacheKey)?.data;
-    if (!collection) return;
-
-    /*
-     * Simply update collection and let responder decide what to do with data
-     */
-    collection.data = [...new Set([community.communityId, ...collection.data])];
-
-    pushToCache(cacheKey, collection);
-    responder(collection);
-  };
-
-  const onFetch = (initial = false) => {
-    const collection = pullFromCache<Amity.CommunityLiveCollectionCache>(cacheKey)?.data;
-
-    const communities = collection?.data ?? [];
-
-    if (!initial && communities.length > 0 && !collection?.params.page) return;
-
-    const query = createQuery(queryCommunities, {
-      ...queryParams,
-      limit: initial ? limit : undefined,
-      page: !initial ? collection?.params.page : undefined,
-    });
-
-    runQuery(
-      query,
-      ({ data: result, error, loading, paging }) => {
-        const data = {
-          loading,
-          error,
-          params: { page: paging?.next },
-          data: communities,
-        };
-
-        if (result) {
-          data.data = initial
-            ? result.map(getResolver('community'))
-            : [...new Set([...communities, ...result.map(getResolver('community'))])];
-        }
-
-        pushToCache(cacheKey, data);
-
-        responder(data);
-      },
-      queryOptions(policy, CACHE_SHORTEN_LIFESPAN),
-    );
-  };
-
-  disposers.push(
-    onCommunityCreated(realtimeRouter('onCreate')),
-    onCommunityDeleted(realtimeRouter('onDelete')),
-    onCommunityUpdated(realtimeRouter('onUpdate')),
-    onCommunityJoined(realtimeRouter('onJoin')),
-    onCommunityLeft(realtimeRouter('onLeft')),
-    onCommunityUserChanged(realtimeRouter('onMemberCountChanged')),
-  );
-
-  onFetch(true);
   disposers.push(() => dropFromCache(cacheKey));
 
   return () => {

package/src/communityRepository/observers/index.ts

@@ -1,5 +1,6 @@
 export * from './observeCommunity';
 
+export * from './searchCommunities';
 export * from './getCommunities';
 export * from './getCommunity';
 export * from './getTrendingCommunities';

package/src/communityRepository/observers/searchCommunities/SearchCommunitiesLiveCollectionController.ts

@@ -0,0 +1,127 @@
+import hash from 'object-hash';
+import { pullFromCache, pushToCache } from '~/cache/api';
+import { CommunitiesPaginationController } from './SearchCommunitiesPaginationController';
+import { CommunitiesQueryStreamController } from './SearchCommunitiesQueryStreamController';
+import { LiveCollectionController } from '~/core/liveCollection/LiveCollectionController';
+import { onCommunityDeleted, onCommunityUpdated } from '~/communityRepository/events';
+import { filterByCommunityMembership, filterByPropEquality } from '~/core/query';
+import { prepareCommunityPayload } from '~/communityRepository/utils';
+import { getActiveClient } from '~/client';
+import { EnumCommunityActions } from './enums';
+import { EnumCommunityMemberActions } from '~/communityRepository/communityMembership/observers/getMembers/enums';
+import {
+  onCommunityJoined,
+  onCommunityLeft,
+  onCommunityUserChanged,
+} from '~/communityRepository/communityMembership';
+
+export class SearchCommunityLiveCollectionController extends LiveCollectionController<
+  'community',
+  Amity.SearchCommunityLiveCollection,
+  Amity.Community,
+  CommunitiesPaginationController
+> {
+  private queryStreamController: CommunitiesQueryStreamController;
+
+  private query: Amity.SearchCommunityLiveCollection;
+
+  constructor(
+    query: Amity.SearchCommunityLiveCollection,
+    callback: Amity.LiveCollectionCallback<Amity.Community>,
+  ) {
+    const queryStreamId = hash(query);
+    const cacheKey = ['community', 'collection', queryStreamId];
+    const paginationController = new CommunitiesPaginationController(query);
+
+    super(paginationController, queryStreamId, cacheKey, callback);
+
+    this.query = query;
+    this.queryStreamController = new CommunitiesQueryStreamController(
+      this.query,
+      this.cacheKey,
+      this.notifyChange.bind(this),
+      prepareCommunityPayload,
+    );
+
+    this.callback = callback.bind(this);
+    this.loadPage({ initial: true });
+  }
+
+  protected setup() {
+    const collection = pullFromCache<Amity.SearchCommunityLiveCollectionCache>(this.cacheKey)?.data;
+    if (!collection) {
+      pushToCache(this.cacheKey, {
+        data: [],
+        params: {},
+      });
+    }
+  }
+
+  protected async persistModel(queryPayload: Amity.CommunityPayload & Amity.Pagination) {
+    await this.queryStreamController.saveToMainDB(queryPayload);
+  }
+
+  protected persistQueryStream({
+    response,
+    direction,
+    refresh,
+  }: Amity.LiveCollectionPersistQueryStreamParams<'community'>) {
+    this.queryStreamController.appendToQueryStream(response, direction, refresh);
+  }
+
+  startSubscription() {
+    return this.queryStreamController.subscribeRTE([
+      { fn: onCommunityDeleted, action: EnumCommunityActions.OnCommunityDeleted },
+      { fn: onCommunityUpdated, action: EnumCommunityActions.OnCommunityUpdated },
+      { fn: onCommunityJoined, action: EnumCommunityMemberActions.OnCommunityJoined },
+      { fn: onCommunityLeft, action: EnumCommunityMemberActions.OnCommunityLeft },
+      { fn: onCommunityUserChanged, action: EnumCommunityMemberActions.OnMemberCountChanged },
+    ]);
+  }
+
+  notifyChange({ origin, loading, error }: Amity.LiveCollectionNotifyParams) {
+    const collection = pullFromCache<Amity.SearchCommunityLiveCollectionCache>(this.cacheKey)?.data;
+    if (!collection) return;
+
+    const data = this.applyFilter(
+      collection.data
+        .map(id => pullFromCache<Amity.Community>(['community', 'get', id])!)
+        .filter(Boolean)
+        .map(({ data }) => data) ?? [],
+    );
+
+    if (!this.shouldNotify(data) && origin === 'event') return;
+
+    this.callback({
+      onNextPage: () => this.loadPage({ direction: Amity.LiveCollectionPageDirection.NEXT }),
+      data,
+      hasNextPage: !!this.paginationController.getNextToken(),
+      loading,
+      error,
+    });
+  }
+
+  applyFilter(data: Amity.Community[]) {
+    const { userId } = getActiveClient();
+
+    let communities = data;
+
+    if (this.query.includeDeleted) {
+      communities = filterByPropEquality(communities, 'isDeleted', false);
+    }
+
+    if (this.query.categoryId) {
+      communities = communities.filter(c => c.categoryIds?.includes(this.query.categoryId!));
+    }
+
+    if (this.query.tags) {
+      communities = communities.filter(c => c.tags?.some(t => this.query.tags?.includes(t)));
+    }
+
+    if (this.query.membership && userId) {
+      communities = filterByCommunityMembership(communities, this.query.membership, userId);
+    }
+
+    return communities;
+  }
+}

package/src/communityRepository/observers/searchCommunities/SearchCommunitiesPaginationController.ts

@@ -0,0 +1,31 @@
+import { PaginationController } from '~/core/liveCollection/PaginationController';
+import { COLLECTION_DEFAULT_PAGINATION_LIMIT } from '~/utils/constants';
+import { inferIsDeleted } from '~/utils/inferIsDeleted';
+
+/**
+ * TODO: handle cache receive cache option, and cache policy
+ * TODO: check if querybyIds is supported
+ */
+export class CommunitiesPaginationController extends PaginationController<
+  'community',
+  Amity.SearchCommunityLiveCollection
+> {
+  async getRequest(queryParams: Amity.SearchCommunityLiveCollection, token: string | undefined) {
+    const { limit = COLLECTION_DEFAULT_PAGINATION_LIMIT, ...params } = queryParams;
+    const options = token ? { token } : { limit };
+
+    const { data: queryResponse } = await this.http.get<Amity.CommunityPayload & Amity.Pagination>(
+      `/api/v3/communities`,
+      {
+        params: {
+          ...params,
+          isDeleted: inferIsDeleted(params.includeDeleted),
+          keyword: params.displayName,
+          filter: params.membership,
+          options,
+        },
+      },
+    );
+    return queryResponse;
+  }
+}

package/src/communityRepository/observers/searchCommunities/SearchCommunitiesQueryStreamController.ts

@@ -0,0 +1,82 @@
+import { QueryStreamController } from '~/core/liveCollection/QueryStreamController';
+import { pullFromCache, pushToCache } from '~/cache/api';
+import { ingestInCache } from '~/cache/api/ingestInCache';
+import { getResolver } from '~/core/model';
+import { getActiveClient } from '~/client';
+import { EnumCommunityActions } from './enums';
+import { EnumCommunityMemberActions } from '~/communityRepository/communityMembership/observers/getMembers/enums';
+
+export class CommunitiesQueryStreamController extends QueryStreamController<
+  Amity.CommunityPayload,
+  Amity.SearchCommunityLiveCollection
+> {
+  private notifyChange: (params: Amity.LiveCollectionNotifyParams) => void;
+
+  private preparePayload: (response: Amity.CommunityPayload) => Amity.ProcessedCommunityPayload;
+
+  constructor(
+    query: Amity.SearchCommunityLiveCollection,
+    cacheKey: string[],
+    notifyChange: (params: Amity.LiveCollectionNotifyParams) => void,
+    preparePayload: (response: Amity.CommunityPayload) => Amity.ProcessedCommunityPayload,
+  ) {
+    super(query, cacheKey);
+    this.notifyChange = notifyChange;
+    this.preparePayload = preparePayload;
+  }
+
+  async saveToMainDB(response: Amity.CommunityPayload) {
+    const processedPayload = await this.preparePayload(response);
+
+    const client = getActiveClient();
+    const cachedAt = client.cache && Date.now();
+
+    if (client.cache) {
+      ingestInCache(processedPayload, { cachedAt });
+    }
+  }
+
+  appendToQueryStream(
+    response: Amity.CommunityPayload & Partial<Amity.Pagination>,
+    direction: Amity.LiveCollectionPageDirection,
+    refresh = false,
+  ) {
+    if (refresh) {
+      pushToCache(this.cacheKey, {
+        data: response.communities.map(getResolver('community')),
+      });
+    } else {
+      const collection = pullFromCache<Amity.SearchCommunityLiveCollectionCache>(
+        this.cacheKey,
+      )?.data;
+
+      const communities = collection?.data ?? [];
+
+      pushToCache(this.cacheKey, {
+        ...collection,
+        data: [...new Set([...communities, ...response.communities.map(getResolver('community'))])],
+      });
+    }
+  }
+
+  reactor(action: EnumCommunityActions | EnumCommunityMemberActions) {
+    return (community: Amity.Community) => {
+      const collection = pullFromCache<Amity.SearchCommunityLiveCollectionCache>(
+        this.cacheKey,
+      )?.data;
+      if (!collection) return;
+
+      pushToCache(this.cacheKey, collection);
+      this.notifyChange({ origin: Amity.LiveDataOrigin.EVENT, loading: false });
+    };
+  }
+
+  subscribeRTE(
+    createSubscriber: {
+      fn: (reactor: (channel: Amity.Community) => void) => Amity.Unsubscriber;
+      action: EnumCommunityActions | EnumCommunityMemberActions;
+    }[],
+  ) {
+    return createSubscriber.map(subscriber => subscriber.fn(this.reactor(subscriber.action)));
+  }
+}

package/src/communityRepository/observers/searchCommunities/enums.ts

@@ -0,0 +1,5 @@
+export enum EnumCommunityActions {
+  OnCommunityCreated = 'onCommunityCreated',
+  OnCommunityDeleted = 'onCommunityDeleted',
+  OnCommunityUpdated = 'onCommunityUpdated',
+}

package/src/communityRepository/observers/searchCommunities.ts

@@ -0,0 +1,56 @@
+import { dropFromCache } from '~/cache/api';
+import { getActiveClient } from '~/client/api';
+import { ENABLE_CACHE_MESSAGE } from '~/utils/constants';
+import { SearchCommunityLiveCollectionController } from './searchCommunities/SearchCommunitiesLiveCollectionController';
+
+/* begin_public_function
+  id: community.query
+*/
+/**
+ * ```js
+ * import { CommunityRepository } from '@amityco/ts-sdk-react-native'
+ *
+ * let communities = []
+ * const unsub = CommunityRepository.searchCommunities({
+ *   displayName: Amity.Community['displayName'],
+ * }, response => merge(communities, response.data))
+ * ```
+ *
+ * Observe all mutations on a list of {@link Amity.Community}s
+ *
+ * @param params for querying communities
+ * @param callback the function to call when new data are available
+ * @returns An {@link Amity.Unsubscriber} function to run when willing to stop observing the communities
+ *
+ * @category Community Live Collection
+ */
+export const searchCommunities = (
+  params: Amity.CommunityLiveCollection,
+  callback: Amity.LiveCollectionCallback<Amity.Community>,
+  config?: Amity.LiveCollectionConfig,
+) => {
+  const { log, cache } = getActiveClient();
+
+  if (!cache) {
+    console.log(ENABLE_CACHE_MESSAGE);
+  }
+
+  const timestamp = Date.now();
+  log(`searchCommunities(tmpid: ${timestamp}) > listen`);
+
+  const searchCommunitiesLiveCollection = new SearchCommunityLiveCollectionController(
+    params,
+    callback,
+  );
+  const disposers = searchCommunitiesLiveCollection.startSubscription();
+
+  const cacheKey = searchCommunitiesLiveCollection.getCacheKey();
+
+  disposers.push(() => dropFromCache(cacheKey));
+
+  return () => {
+    log(`searchCommunities(tmpid: ${timestamp}) > dispose`);
+    disposers.forEach(fn => fn());
+  };
+};
+/* end_public_function */

package/src/communityRepository/utils/payload.ts

@@ -1,4 +1,5 @@
 import { CommunityPostSettingMaps, DefaultCommunityPostSetting } from '~/@types';
+import { pullFromCache } from '~/cache/api';
 import { withUsers } from '~/group/utils';
 import { updateMembershipStatus } from './communityWithMembership';
 
@@ -13,6 +14,22 @@ const getMatchPostSetting = (value: {
       value.onlyAdminCanPost === CommunityPostSettingMaps[key].onlyAdminCanPost,
   ) ?? DefaultCommunityPostSetting;
 
+const convertCommunityUsersToUniqueObject = (
+  communityUsers: Amity.RawMembership<'community'>[],
+) => {
+  if (!communityUsers) return communityUsers;
+
+  const result: {
+    [key: string]: Amity.RawMembership<'community'>;
+  } = {};
+
+  communityUsers.forEach(user => {
+    result[`${user.userId}#${user.communityId}`] = user;
+  });
+
+  return result;
+};
+
 export const prepareCommunityPayload = (
   rawPayload: Amity.CommunityPayload,
 ): Amity.ProcessedCommunityPayload => {
@@ -27,7 +44,24 @@ export const prepareCommunityPayload = (
     }),
   );
 
-  const communityUsers = withUsers(rawPayload.communityUsers);
+  const mergeCommunityUsers = communities.reduce<{
+    [key: string]: Amity.RawMembership<'community'>;
+  }>((acc, { communityId }) => {
+    const users = pullFromCache<Amity.RawMembership<'community'>[]>([
+      'communityUsers',
+      'collection',
+      communityId,
+    ])?.data;
+
+    if (!users) return acc;
+
+    return {
+      ...convertCommunityUsersToUniqueObject(users),
+      ...acc,
+    };
+  }, convertCommunityUsersToUniqueObject(rawPayload.communityUsers));
+
+  const communityUsers = withUsers(Object.values(mergeCommunityUsers));
 
   const communityWithMembershipStatus = updateMembershipStatus(communities, communityUsers);
 

package/src/communityRepository/utils/saveCommunityUsers.ts

@@ -0,0 +1,16 @@
+import { pushToCache } from '~/cache/api';
+
+export const saveCommunityUsers = (
+  communities: Amity.CommunityPayload['communities'],
+  communityUsers: Amity.CommunityPayload['communityUsers'],
+) => {
+  if (communities.length === 0 || communityUsers.length === 0) return;
+
+  communities.forEach(({ communityId }) => {
+    const collection = communityUsers.filter(
+      ({ communityId: userCommunityId }) => communityId === userCommunityId,
+    );
+
+    pushToCache(['communityUsers', 'collection', communityId], collection);
+  });
+};

package/src/core/liveCollection/LiveCollectionController.ts

@@ -1,4 +1,4 @@
-import { convertGetterPropsToStatic } from '~/utils/object';
+import { convertGetterPropsToStatic, removeFunctionProperties } from '~/utils/object';
 import { isEqual } from '~/utils/isEqual';
 import { PaginationController } from './PaginationController';
 import { PaginationNoPageController } from './PaginationNoPageController';
@@ -57,10 +57,13 @@ export abstract class LiveCollectionController<
     }
   }
 
-  protected loadPage(
+  protected loadPage({
     initial = false,
-    direction: Amity.LiveCollectionPageDirection = Amity.LiveCollectionPageDirection.NEXT,
-  ) {
+    direction = Amity.LiveCollectionPageDirection.NEXT,
+  }: {
+    initial?: boolean;
+    direction?: Amity.LiveCollectionPageDirection;
+  }) {
     this.setup();
 
     this.notifyChange({ origin: Amity.LiveDataOrigin.LOCAL, loading: true });
@@ -129,9 +132,10 @@ export abstract class LiveCollectionController<
   abstract notifyChange(params: Amity.LiveCollectionNotifyParams): void;
 
   protected shouldNotify(data: TPublicPayload[]) {
-    if (isEqual(this.snapshot, data)) return false;
+    const newData = data.map(convertGetterPropsToStatic).map(removeFunctionProperties);
+    if (isEqual(this.snapshot, newData)) return false;
 
-    this.snapshot = data.map(payload => convertGetterPropsToStatic(payload)) as TPublicPayload[];
+    this.snapshot = newData as TPublicPayload[];
     return true;
   }
 

package/src/fileRepository/api/createFile.ts

@@ -24,8 +24,11 @@ export const createFile = async <T extends Amity.FileType = any>(
   const client = getActiveClient();
   client.log('file/createFile', formData);
 
-  if (!formData.getAll('files').length)
-    throw new Error('The formData object must have a `files` key.');
+  const files = formData.getAll('files');
+
+  if (!files.length) throw new Error('The formData object must have a `files` key.');
+
+  formData.append('preferredFilename', (files[0] as File).name);
 
   const headers =
     'getHeaders' in formData

package/src/fileRepository/api/createImage.ts

@@ -23,8 +23,12 @@ export const createImage = async (
   const client = getActiveClient();
   client.log('file/createImage', formData);
 
-  if (!formData.getAll('files').length)
-    throw new Error('The formData object must have a `files` key.');
+  const files = formData.getAll('files');
+
+  if (!files.length) throw new Error('The formData object must have a `files` key.');
+
+  formData.append('preferredFilename', (files[0] as File).name);
+
   const headers =
     'getHeaders' in formData
       ? (formData as any).getHeaders()

package/src/fileRepository/api/createVideo.ts

@@ -26,8 +26,11 @@ export const createVideo = async (
   const client = getActiveClient();
   client.log('file/createVideo', formData);
 
-  if (!formData.getAll('files').length)
-    throw new Error('The formData object must have a `files` key.');
+  const files = formData.getAll('files');
+
+  if (!files.length) throw new Error('The formData object must have a `files` key.');
+
+  formData.append('preferredFilename', (files[0] as File).name);
 
   if (feedType) {
     formData.append('feedType', feedType);

package/src/fileRepository/api/uploadFile.ts

@@ -28,8 +28,11 @@ export const uploadFile = async <T extends Amity.FileType = any>(
   const client = getActiveClient();
   client.log('file/uploadFile', formData);
 
-  if (!formData.getAll('files').length)
-    throw new Error('The formData object must have a `files` key.');
+  const files = formData.getAll('files');
+
+  if (!files.length) throw new Error('The formData object must have a `files` key.');
+
+  formData.append('preferredFilename', (files[0] as File).name);
 
   const headers =
     'getHeaders' in formData

package/src/fileRepository/api/uploadImage.ts

@@ -28,8 +28,11 @@ export const uploadImage = async (
   const client = getActiveClient();
   client.log('file/uploadImage', formData);
 
-  if (!formData.getAll('files').length)
-    throw new Error('The formData object must have a `files` key.');
+  const files = formData.getAll('files');
+
+  if (!files.length) throw new Error('The formData object must have a `files` key.');
+
+  formData.append('preferredFilename', (files[0] as File).name);
 
   const headers =
     'getHeaders' in formData