useDataLoader
ts
function useDataLoader(): {
loadFile: (file: File) => Promise<HandleArray<Data>>;
loadFileFromUrl: (url: string) => Promise<HandleArray<Data>>;
loadFolder: (files: File[]) => Promise<HandleArray<Data>>;
loadFolderFromUrls: (urls: readonly string[]) => Promise<HandleArray<Data>>;
loadBuffer: (buffer: ArrayBufferLike, filename: string) => Promise<HandleArray<Data>>;
isLoading: boolean;
progress: DataLoaderProgress | null;
error: Error | null;
reset: () => void;
};Provides data loading methods with reactive loading, progress, and error state.
Wraps ImFusion.loadFile, ImFusion.loadFileFromUrl, ImFusion.loadFolder, ImFusion.loadFolderFromUrls, and ImFusion.loadBuffer with React-friendly state management.
State (isLoading, progress, error) tracks a single load operation at a time.
Concurrent loads from the same hook instance are not supported, use separate instances if needed.
Returns
ts
{
loadFile: (file: File) => Promise<HandleArray<Data>>;
loadFileFromUrl: (url: string) => Promise<HandleArray<Data>>;
loadFolder: (files: File[]) => Promise<HandleArray<Data>>;
loadFolderFromUrls: (urls: readonly string[]) => Promise<HandleArray<Data>>;
loadBuffer: (buffer: ArrayBufferLike, filename: string) => Promise<HandleArray<Data>>;
isLoading: boolean;
progress: DataLoaderProgress | null;
error: | Error
| null;
reset: () => void;
}A memoized object with load methods and state
| Name | Type |
|---|---|
loadFile() | (file: File) => Promise<HandleArray<Data>> |
loadFileFromUrl() | (url: string) => Promise<HandleArray<Data>> |
loadFolder() | (files: File[]) => Promise<HandleArray<Data>> |
loadFolderFromUrls() | (urls: readonly string[]) => Promise<HandleArray<Data>> |
loadBuffer() | (buffer: ArrayBufferLike, filename: string) => Promise<HandleArray<Data>> |
isLoading | boolean |
progress | DataLoaderProgress | null |
error | | Error | null |
reset() | () => void |
Throws
If called outside of an ImFusionProvider
Throws
If called before the SDK has finished initializing
Example
tsx
function LoadButton() {
const { loadFileFromUrl, isLoading, progress, error } = useDataLoader();
return (
<>
<button onClick={() => loadFileFromUrl('/data/ct.nii.gz')} disabled={isLoading}>
Load CT
</button>
{isLoading && progress && <p>{Math.round((progress.received / (progress.total ?? 1)) * 100)}%</p>}
{error && <p>Error: {error.message}</p>}
</>
);
}