Skip to main content

useMediaService

Reach for useMediaService when you need to browse the Media Library from your own UI: listing image files and navigating the directory tree. It is a thin wrapper around the configurator's API service factory and configures ApiClient on first use with the configurator's apiBaseUrl and apiToken.

Getting the service​

import { useMediaService } from "@expivi/product-configurator";

const media = useMediaService(configurator);

Unlike most hooks, this one returns a plain object of async methods (not a controller class).

Example: list a folder's files and sub-folders​

const media = useMediaService(configurator);

// Image files inside a directory (omit directoryId for the root)
const { images } = await media.getMediaFiles({ directoryId: someFolderId });

// Sub-folders, normalized into tree nodes for a UI
const { directories, parentId } = await media.getMediaDirectoriesWithHierarchy({
  parentId: someFolderId,
});

API​

getMediaFiles(params?)​

Fetches media files. Accepts the standard MediaLibrarySearchParams plus an optional directoryId (pass null/omit for the root). Resolves to a MediaLibraryFilesResponse.

getMediaDirectories(params?)​

Fetches media directories. Accepts MediaLibrarySearchParams plus an optional parentId. Resolves to a MediaLibraryDirectoriesResponse.

getMediaDirectoriesWithHierarchy(params?)​

Fetches directories and maps them into the MediaLibraryFolder shape used by the UI layer. Resolves to:

  • directories: normalized tree nodes, each with children: [], hasLoadedChildren: false, and breadcrumbs: [] ready to be populated as you lazy-load deeper levels
  • parentId: the requested parentId or null