ImageDefinition

ImageDefinition is a specialized CoValue designed specifically for managing images in Jazz applications. It extends beyond basic file storage by supporting multiple resolutions of the same image and progressive loading patterns.

Beyond ImageDefinition, Jazz offers higher-level functions and components that make it easier to use images:

createImage() - function to create an ImageDefinition from a file
ProgressiveImg - React component to display an image with progressive loading
useProgressiveImg - React hook to load an image in your own component

The Image Upload example demonstrates use of ProgressiveImg and ImageDefinition.

Creating Images

The easiest way to create and use images in your Jazz application is with the createImage() function:

import { function createImage(imageBlobOrFile: Blob | File, options?: {
    owner?: Group | Account;
    maxSize?: 256 | 1024 | 2048;
}): Promise<co.loaded<typeof ImageDefinition, {
    $each: true;
}>>@categoryImage creationcreateImage } from "jazz-tools/browser-media-images";

// Create an image from a file input
async function function handleFileUpload(event: React.ChangeEvent<HTMLInputElement>): Promise<void>handleFileUpload(event: React.ChangeEvent<HTMLInputElement>event: export namespace ReactReact.interface React.ChangeEvent<T = Element>ChangeEvent<HTMLInputElement>) {
  const const file: File | undefinedfile = event: React.ChangeEvent<HTMLInputElement>event.React.ChangeEvent<HTMLInputElement>.target: EventTarget & HTMLInputElementtarget.HTMLInputElement.files: FileList | nullReturns a FileList object on a file type input object.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLInputElement/files)files?.[0];
  if (const file: File | undefinedfile) {
    // Creates ImageDefinition with multiple resolutions automatically
    const const image: {
    [key: string]: FileStream;
} & {
    originalSize: [number, number];
    placeholderDataURL: string | undefined;
} & {
    [key: string]: FileStream | null;
} & CoMapimage = await function createImage(imageBlobOrFile: Blob | File, options?: {
    owner?: Group | Account;
    maxSize?: 256 | 1024 | 2048;
}): Promise<co.loaded<typeof ImageDefinition, {
    $each: true;
}>>@categoryImage creationcreateImage(const file: Filefile, { owner?: Group | Account | undefinedowner: const myGroup: GroupmyGroup });

    // Store the image in your application data
    const me: AccountInstance<{
    root: co.Map<{}, unknown, Group | Account>;
    profile: co.Profile<{
        name: z.z.ZodString;
        image: co.Optional<co.Map<{
            originalSize: z.z.ZodTuple<[z.z.ZodNumber, z.z.ZodNumber], null>;
            placeholderDataURL: z.ZodOptional<z.z.ZodString>;
        }, co.FileStream, Group | Account> & {
            ...;
        }>;
    }>;
}>me.Account.profile: {
    name: string;
    image: ({
        originalSize: [number, number];
        placeholderDataURL: string | undefined;
    } & {
        [key: string]: FileStream;
    } & CoMap) | undefined;
    inbox: string | undefined;
    inboxInvite: string | undefined;
} & CoMap & Profileprofile.image: ({
    originalSize: [number, number];
    placeholderDataURL: string | undefined;
} & {
    [key: string]: FileStream;
} & CoMap) | undefinedimage = const image: {
    [key: string]: FileStream;
} & {
    originalSize: [number, number];
    placeholderDataURL: string | undefined;
} & {
    [key: string]: FileStream | null;
} & CoMapimage;
  }
}

Note: createImage() requires a browser environment as it uses browser APIs to process images.

The createImage() function:

Creates an ImageDefinition with the right properties
Generates a small placeholder for immediate display
Creates multiple resolution variants of your image
Returns the created ImageDefinition

Configuration Options

You can configure createImage() with additional options:

// Configuration options
const const options: {
    owner: Account | ({
        [x: string]: any;
    } & Account);
    maxSize: 1024;
}options = {
  owner: Account | ({
    [x: string]: any;
} & Account)owner: const me: Account | ({
    [x: string]: any;
} & Account)me,                // Owner for access control
  maxSize: 1024maxSize: 1024 as 1024     // Maximum resolution to generate
};

// Setting maxSize controls which resolutions are generated:
// 256: Only creates the smallest resolution (256px on longest side)
// 1024: Creates 256px and 1024px resolutions
// 2048: Creates 256px, 1024px, and 2048px resolutions
// undefined: Creates all resolutions including the original size

const const image: {
    [key: string]: FileStream;
} & {
    originalSize: [number, number];
    placeholderDataURL: string | undefined;
} & {
    [key: string]: FileStream | null;
} & CoMapimage = await function createImage(imageBlobOrFile: Blob | File, options?: {
    owner?: Group | Account;
    maxSize?: 256 | 1024 | 2048;
}): Promise<Loaded<typeof ImageDefinition, {
    $each: true;
}>>@categoryImage creationcreateImage(const file: Filefile, const options: {
    owner: Account | ({
        [x: string]: any;
    } & Account);
    maxSize: 1024;
}options);

Ownership

Like other CoValues, you can specify ownership when creating image definitions.

const const teamGroup: GroupteamGroup = class Group@categoryIdentity & PermissionsGroup.Group.create<Group>(this: CoValueClass<Group>, options?: {
    owner: Account;
} | Account): Groupcreate();
const teamGroup: GroupteamGroup.Group.addMember(member: Account, role: AccountRole): void (+3 overloads)addMember(const colleagueAccount: Account | ({
    [x: string]: any;
} & Account)colleagueAccount, "writer");

// Create an image with shared ownership
const const teamImage: {
    [key: string]: FileStream;
} & {
    originalSize: [number, number];
    placeholderDataURL: string | undefined;
} & {
    [key: string]: FileStream | null;
} & CoMapteamImage = await function createImage(imageBlobOrFile: Blob | File, options?: {
    owner?: Group | Account;
    maxSize?: 256 | 1024 | 2048;
}): Promise<Loaded<typeof ImageDefinition, {
    $each: true;
}>>@categoryImage creationcreateImage(const file: Filefile, { owner?: Group | Account | undefinedowner: const teamGroup: GroupteamGroup });

See Groups as permission scopes for more information on how to use groups to control access to images.

Displaying Images with `ProgressiveImg`

For a complete progressive loading experience, use the ProgressiveImg component:

import { function ProgressiveImg({ children, image, maxWidth, targetWidth, }: {
    children: (result: {
        src: string | undefined;
        res: `${number}x${number}` | "placeholder" | undefined;
        originalSize: readonly [number, number] | undefined;
    }) => React.ReactNode;
    image: co.loaded<typeof ImageDefinition> | null | undefined;
    maxWidth?: number;
    targetWidth?: number;
}): React.ReactNode@categoryMediaProgressiveImg } from "jazz-tools/react";
import { import coco } from "jazz-tools";
const const Image: co.Map<{
    originalSize: ZodTuple<[ZodNumber, ZodNumber], null>;
    placeholderDataURL: ZodOptional<ZodString>;
}, co.FileStream, Account | Group> & {
    ...;
}Image = import coco.function image(): co.Image
export imageimage();

function function GalleryView({ image }: {
    image: co.loaded<typeof Image>;
}): React.JSX.ElementGalleryView({ image: {
    originalSize: [number, number];
    placeholderDataURL: string | undefined;
} & {
    [key: string]: FileStream | null;
} & CoMapimage }: { image: {
    originalSize: [number, number];
    placeholderDataURL: string | undefined;
} & {
    [key: string]: FileStream | null;
} & CoMapimage: import coco.type loaded<T extends CoValueClassOrSchema, R extends ResolveQuery<T> = true> = R extends boolean | undefined ? NonNullable<InstanceOfSchemaCoValuesNullable<T>> : [NonNullable<InstanceOfSchemaCoValuesNullable<T>>] extends [...] ? Exclude<...> extends CoValue ? R extends {
    ...;
} ? ((CoValue & ... 1 more ... & (ItemDepth extends boolean | undefined ? CoValue & Exclude<...> : [...] extends [...] ? Exclude<...> extends CoValue ? ItemDepth extends {
    ...;
} ? ((CoValue & ... 1 more ... & (ItemDepth extends boolean | undefined ? CoValue & Exclude<...> : [...] extends [...] ? Exclude<...> extends CoValue ? ItemDepth extends {
    ...;
} ? ((CoValue & ... 1 more ... & (ItemDepth extends boolean | undefined ? CoValue & Exclude<...> : [...] extends [...] ? Exclude<...> extends CoValue ? ItemDepth extends {
    ...;
} ? ((CoValue & ... 1 more ... & (ItemDepth extends boolean | undefined ? CoValue & Exclude<...> : [...] extends [...] ? Exclude<...> extends CoValue ? ItemDepth extends {
    ...;
} ? ((CoValue & ... 1 more ... & (ItemDepth extends boolean | undefined ? CoValue & Exclude<...> : [...] extends [...] ? Exclude<...> extends CoValue ? ItemDepth extends {
    ...;
} ? ((CoValue & ... 1 more ... & (ItemDepth extends boolean | undefined ? CoValue & Exclude<...> : [...] extends [...] ? Exclude<...> extends CoValue ? ItemDepth extends {
    ...;
} ? ((CoValue & ... 1 more ... & (ItemDepth extends boolean | undefined ? CoValue & Exclude<...> : [...] extends [...] ? Exclude<...> extends CoValue ? ItemDepth extends {
    ...;
} ? ((CoValue & ... 1 more ... & (ItemDepth extends boolean | undefined ? CoValue & Exclude<...> : [...] extends [...] ? Exclude<...
export loadedloaded<typeof const Image: co.Map<{
    originalSize: ZodTuple<[ZodNumber, ZodNumber], null>;
    placeholderDataURL: ZodOptional<ZodString>;
}, co.FileStream, Account | Group> & {
    ...;
}Image> }) {
  return (
    <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="image-container">
      <function ProgressiveImg({ children, image, maxWidth, targetWidth, }: {
    children: (result: {
        src: string | undefined;
        res: `${number}x${number}` | "placeholder" | undefined;
        originalSize: readonly [number, number] | undefined;
    }) => React.ReactNode;
    image: co.loaded<typeof ImageDefinition> | null | undefined;
    maxWidth?: number;
    targetWidth?: number;
}): React.ReactNode@categoryMediaProgressiveImg
        image: ({
    originalSize: [number, number];
    placeholderDataURL: string | undefined;
} & {
    [key: string]: FileStream | null;
} & CoMap) | null | undefinedimage={image: {
    originalSize: [number, number];
    placeholderDataURL: string | undefined;
} & {
    [key: string]: FileStream | null;
} & CoMapimage}  // The image definition to load
        targetWidth?: number | undefinedtargetWidth={800} // Looks for the best available resolution for a 800px image
      >
        {({ src: string | undefinedsrc }) => (
          <React.JSX.IntrinsicElements.img: React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>img 
            React.ImgHTMLAttributes<HTMLImageElement>.src?: string | undefinedsrc={src: string | undefinedsrc} 
            React.ImgHTMLAttributes<HTMLImageElement>.alt?: string | undefinedalt="Gallery image" 
            React.HTMLAttributes<T>.className?: string | undefinedclassName="gallery-image"
          />
        )}
      </function ProgressiveImg({ children, image, maxWidth, targetWidth, }: {
    children: (result: {
        src: string | undefined;
        res: `${number}x${number}` | "placeholder" | undefined;
        originalSize: readonly [number, number] | undefined;
    }) => React.ReactNode;
    image: co.loaded<typeof ImageDefinition> | null | undefined;
    maxWidth?: number;
    targetWidth?: number;
}): React.ReactNode@categoryMediaProgressiveImg>
    </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
  );
}

The ProgressiveImg component handles:

Showing a placeholder while loading
Automatically selecting the appropriate resolution
Progressive enhancement as higher resolutions become available
Cleaning up resources when unmounted

Using `useProgressiveImg` Hook

For more control over image loading, you can implement your own progressive image component:

import { function useProgressiveImg({ image, maxWidth, targetWidth, }: {
    image: co.loaded<typeof ImageDefinition> | null | undefined;
    maxWidth?: number;
    targetWidth?: number;
}): {
    src: string | undefined;
    res: `${number}x${number}` | "placeholder" | undefined;
    originalSize: [number, number] | undefined;
}@categoryMediauseProgressiveImg } from "jazz-tools/react";

function function CustomImageComponent({ image }: {
    image: co.loaded<typeof Image>;
}): React.JSX.ElementCustomImageComponent({ image: {
    originalSize: [number, number];
    placeholderDataURL: string | undefined;
} & {
    [key: string]: FileStream | null;
} & CoMapimage }: { image: {
    originalSize: [number, number];
    placeholderDataURL: string | undefined;
} & {
    [key: string]: FileStream | null;
} & CoMapimage: import coco.type loaded<T extends CoValueClassOrSchema, R extends ResolveQuery<T> = true> = R extends boolean | undefined ? NonNullable<InstanceOfSchemaCoValuesNullable<T>> : [NonNullable<InstanceOfSchemaCoValuesNullable<T>>] extends [...] ? Exclude<...> extends CoValue ? R extends {
    ...;
} ? ((CoValue & ... 1 more ... & (ItemDepth extends boolean | undefined ? CoValue & Exclude<...> : [...] extends [...] ? Exclude<...> extends CoValue ? ItemDepth extends {
    ...;
} ? ((CoValue & ... 1 more ... & (ItemDepth extends boolean | undefined ? CoValue & Exclude<...> : [...] extends [...] ? Exclude<...> extends CoValue ? ItemDepth extends {
    ...;
} ? ((CoValue & ... 1 more ... & (ItemDepth extends boolean | undefined ? CoValue & Exclude<...> : [...] extends [...] ? Exclude<...> extends CoValue ? ItemDepth extends {
    ...;
} ? ((CoValue & ... 1 more ... & (ItemDepth extends boolean | undefined ? CoValue & Exclude<...> : [...] extends [...] ? Exclude<...> extends CoValue ? ItemDepth extends {
    ...;
} ? ((CoValue & ... 1 more ... & (ItemDepth extends boolean | undefined ? CoValue & Exclude<...> : [...] extends [...] ? Exclude<...> extends CoValue ? ItemDepth extends {
    ...;
} ? ((CoValue & ... 1 more ... & (ItemDepth extends boolean | undefined ? CoValue & Exclude<...> : [...] extends [...] ? Exclude<...> extends CoValue ? ItemDepth extends {
    ...;
} ? ((CoValue & ... 1 more ... & (ItemDepth extends boolean | undefined ? CoValue & Exclude<...> : [...] extends [...] ? Exclude<...> extends CoValue ? ItemDepth extends {
    ...;
} ? ((CoValue & ... 1 more ... & (ItemDepth extends boolean | undefined ? CoValue & Exclude<...> : [...] extends [...] ? Exclude<...
export loadedloaded<typeof const Image: co.Map<{
    originalSize: ZodTuple<[ZodNumber, ZodNumber], null>;
    placeholderDataURL: ZodOptional<ZodString>;
}, co.FileStream, Account | Group> & {
    ...;
}Image> }) {
  const {
    const src: string | undefinedsrc,         // Data URI containing the image data as a base64 string,
                 // or a placeholder image URI
    const res: `${number}x${number}` | "placeholder" | undefinedres,         // The current resolution
    const originalSize: [number, number] | undefinedoriginalSize // The original size of the image
  } = function useProgressiveImg({ image, maxWidth, targetWidth, }: {
    image: co.loaded<typeof ImageDefinition> | null | undefined;
    maxWidth?: number;
    targetWidth?: number;
}): {
    src: string | undefined;
    res: `${number}x${number}` | "placeholder" | undefined;
    originalSize: [number, number] | undefined;
}@categoryMediauseProgressiveImg({
    image: ({
    originalSize: [number, number];
    placeholderDataURL: string | undefined;
} & {
    [key: string]: FileStream | null;
} & CoMap) | null | undefinedimage: image: {
    originalSize: [number, number];
    placeholderDataURL: string | undefined;
} & {
    [key: string]: FileStream | null;
} & CoMapimage,  // The image definition to load
    targetWidth?: number | undefinedtargetWidth: 800  // Limit to resolutions up to 800px wide
  });

  // When image is not available yet
  if (!const src: string | undefinedsrc) {
    return <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="image-loading-fallback">Loading image...</React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>;
  }
  
  // When image is loading, show a placeholder
  if (const res: `${number}x${number}` | "placeholder" | undefinedres === "placeholder") {
    return <React.JSX.IntrinsicElements.img: React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>img React.ImgHTMLAttributes<HTMLImageElement>.src?: string | undefinedsrc={const src: stringsrc} React.ImgHTMLAttributes<HTMLImageElement>.alt?: string | undefinedalt="Loading..." React.HTMLAttributes<T>.className?: string | undefinedclassName="blur-effect" />;
  }

  // Full image display with custom overlay
  return (
    <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="custom-image-wrapper">
      <React.JSX.IntrinsicElements.img: React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>img 
        React.ImgHTMLAttributes<HTMLImageElement>.src?: string | undefinedsrc={const src: stringsrc} 
        React.ImgHTMLAttributes<HTMLImageElement>.alt?: string | undefinedalt="Custom image" 
        React.HTMLAttributes<T>.className?: string | undefinedclassName="custom-image"
      />
      <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="image-overlay">
        <React.JSX.IntrinsicElements.span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>span React.HTMLAttributes<T>.className?: string | undefinedclassName="image-caption">Resolution: {const res: `${number}x${number}` | undefinedres}</React.JSX.IntrinsicElements.span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>span>
      </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
    </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
  );
}

Understanding ImageDefinition

Behind the scenes, ImageDefinition is a specialized CoValue that stores:

The original image dimensions (originalSize)
An optional placeholder (placeholderDataURL) for immediate display
Multiple resolution variants of the same image as FileStreams

Each resolution is stored with a key in the format "widthxheight" (e.g., "1920x1080", "800x450").

// Structure of an ImageDefinition
const const image: {
    originalSize: [number, number];
    placeholderDataURL: string | undefined;
} & {
    [key: string]: FileStream;
} & CoMapimage = const ImageDefinition: CoMapSchema<{
    originalSize: ZodTuple<[ZodNumber, ZodNumber], null>;
    placeholderDataURL: ZodOptional<ZodString>;
}, FileStreamSchema, Account | Group> & {
    ...;
}@categoryMediaImageDefinition.CoMapSchema<{ originalSize: ZodTuple<[ZodNumber, ZodNumber], null>; placeholderDataURL: ZodOptional<ZodString>; }, FileStreamSchema, Account | Group>.create: (init: {
    originalSize: [number, number];
    placeholderDataURL?: string | undefined;
}, options?: Account | Group | {
    owner: Account | Group;
    unique?: CoValueUniqueness["uniqueness"];
} | undefined) => {
    ...;
} & ... 1 more ... & CoMapcreate({
  originalSize: [number, number]originalSize: [1920, 1080],
  placeholderDataURL?: string | undefinedplaceholderDataURL: "data:image/jpeg;base64,/9j/4AAQSkZJRg...",
});

// Accessing the highest available resolution
const const highestRes: {
    res: `${number}x${number}`;
    stream: import("/vercel/path0/packages/jazz-tools/dist/index").BinaryCoStream;
} | undefinedhighestRes = const ImageDefinition: CoMapSchema<{
    originalSize: ZodTuple<[ZodNumber, ZodNumber], null>;
    placeholderDataURL: ZodOptional<ZodString>;
}, FileStreamSchema, Account | Group> & {
    ...;
}@categoryMediaImageDefinition.function highestResAvailable(imageDef: ImageDefinition, options?: {
    maxWidth?: number;
    targetWidth?: number;
}): {
    res: `${number}x${number}`;
    stream: import("/vercel/path0/packages/jazz-tools/dist/index").BinaryCoStream;
} | undefinedhighestResAvailable(const image: {
    originalSize: [number, number];
    placeholderDataURL: string | undefined;
} & {
    [key: string]: FileStream;
} & CoMapimage);
if (const highestRes: {
    res: `${number}x${number}`;
    stream: import("/vercel/path0/packages/jazz-tools/dist/index").BinaryCoStream;
} | undefinedhighestRes) {
  var console: ConsoleThe `console` module provides a simple debugging console that is similar to the
JavaScript console mechanism provided by web browsers.

The module exports two specific components:

* A `Console` class with methods such as `console.log()`, `console.error()` and `console.warn()` that can be used to write to any Node.js stream.
* A global `console` instance configured to write to [`process.stdout`](https://nodejs.org/docs/latest-v20.x/api/process.html#processstdout) and
[`process.stderr`](https://nodejs.org/docs/latest-v20.x/api/process.html#processstderr). The global `console` can be used without importing the `node:console` module.

_**Warning**_: The global console object's methods are neither consistently
synchronous like the browser APIs they resemble, nor are they consistently
asynchronous like all other Node.js streams. See the [`note on process I/O`](https://nodejs.org/docs/latest-v20.x/api/process.html#a-note-on-process-io) for
more information.

Example using the global `console`:

```js
console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
//   Error: Whoops, something bad happened
//     at [eval]:5:15
//     at Script.runInThisContext (node:vm:132:18)
//     at Object.runInThisContext (node:vm:309:38)
//     at node:internal/process/execution:77:19
//     at [eval]-wrapper:6:22
//     at evalScript (node:internal/process/execution:76:60)
//     at node:internal/main/eval_string:23:3

const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr
```

Example using the `Console` class:

```js
const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);

myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err

const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
```
@see[source](https://github.com/nodejs/node/blob/v20.11.1/lib/console.js)console.Console.log(message?: any, ...optionalParams: any[]): void (+2 overloads)[MDN Reference](https://developer.mozilla.org/docs/Web/API/console/log_static)log(`Found resolution: ${const highestRes: {
    res: `${number}x${number}`;
    stream: import("/vercel/path0/packages/jazz-tools/dist/index").BinaryCoStream;
}highestRes.res: `${number}x${number}`res}`);
  var console: ConsoleThe `console` module provides a simple debugging console that is similar to the
JavaScript console mechanism provided by web browsers.

The module exports two specific components:

* A `Console` class with methods such as `console.log()`, `console.error()` and `console.warn()` that can be used to write to any Node.js stream.
* A global `console` instance configured to write to [`process.stdout`](https://nodejs.org/docs/latest-v20.x/api/process.html#processstdout) and
[`process.stderr`](https://nodejs.org/docs/latest-v20.x/api/process.html#processstderr). The global `console` can be used without importing the `node:console` module.

_**Warning**_: The global console object's methods are neither consistently
synchronous like the browser APIs they resemble, nor are they consistently
asynchronous like all other Node.js streams. See the [`note on process I/O`](https://nodejs.org/docs/latest-v20.x/api/process.html#a-note-on-process-io) for
more information.

Example using the global `console`:

```js
console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
//   Error: Whoops, something bad happened
//     at [eval]:5:15
//     at Script.runInThisContext (node:vm:132:18)
//     at Object.runInThisContext (node:vm:309:38)
//     at node:internal/process/execution:77:19
//     at [eval]-wrapper:6:22
//     at evalScript (node:internal/process/execution:76:60)
//     at node:internal/main/eval_string:23:3

const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr
```

Example using the `Console` class:

```js
const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);

myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err

const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
```
@see[source](https://github.com/nodejs/node/blob/v20.11.1/lib/console.js)console.Console.log(message?: any, ...optionalParams: any[]): void (+2 overloads)[MDN Reference](https://developer.mozilla.org/docs/Web/API/console/log_static)log(`Stream: ${const highestRes: {
    res: `${number}x${number}`;
    stream: import("/vercel/path0/packages/jazz-tools/dist/index").BinaryCoStream;
}highestRes.stream: FileStreamstream}`);
}

For more details on using ImageDefinition directly, see the VanillaJS docs.

Fallback Behavior

highestResAvailable returns the largest resolution that fits your constraints. If a resolution has incomplete data, it falls back to the next available lower resolution.

const const image: {
    originalSize: [number, number];
    placeholderDataURL: string | undefined;
} & {
    [key: string]: FileStream;
} & CoMapimage = const ImageDefinition: CoMapSchema<{
    originalSize: ZodTuple<[ZodNumber, ZodNumber], null>;
    placeholderDataURL: ZodOptional<ZodString>;
}, FileStreamSchema, Account | Group> & {
    ...;
}@categoryMediaImageDefinition.CoMapSchema<{ originalSize: ZodTuple<[ZodNumber, ZodNumber], null>; placeholderDataURL: ZodOptional<ZodString>; }, FileStreamSchema, Account | Group>.create: (init: {
    originalSize: [number, number];
    placeholderDataURL?: string | undefined;
}, options?: Account | Group | {
    owner: Account | Group;
    unique?: CoValueUniqueness["uniqueness"];
} | undefined) => {
    ...;
} & ... 1 more ... & CoMapcreate({
  originalSize: [number, number]originalSize: [1920, 1080],
});

const image: {
    originalSize: [number, number];
    placeholderDataURL: string | undefined;
} & {
    [key: string]: FileStream;
} & CoMapimage["1920x1080"] = class FileStreamFileStreams are `CoFeed`s that contain binary data, collaborative versions of `Blob`s.
@categoryDescriptionDeclaration
`FileStream` can be referenced in schemas.

```ts
import { coField, FileStream } from "jazz-tools";

class MyCoMap extends CoMap {
file = coField.ref(FileStream);
}
```@categoryCoValuesFileStream.FileStream.create<FileStream>(this: CoValueClass<FileStream>, options?: {
    owner?: Account | Group;
} | Account | Group): FileStreamCreate a new empty `FileStream` instance.
@paramoptions - Configuration options for the new FileStream@paramoptions.owner - The Account or Group that will own this FileStream and control access rights@example```typescript
// Create owned by an account
const stream = FileStream.create({ owner: myAccount });

// Create owned by a group
const stream = FileStream.create({ owner: teamGroup });

// Create with implicit owner
const stream = FileStream.create(myAccount);
```@remarksFor uploading an existing file or blob, use {@link FileStream.createFromBlob} instead.@categoryCreationcreate(); // Empty image upload
const image: {
    originalSize: [number, number];
    placeholderDataURL: string | undefined;
} & {
    [key: string]: FileStream;
} & CoMapimage["800x450"] = await class FileStreamFileStreams are `CoFeed`s that contain binary data, collaborative versions of `Blob`s.
@categoryDescriptionDeclaration
`FileStream` can be referenced in schemas.

```ts
import { coField, FileStream } from "jazz-tools";

class MyCoMap extends CoMap {
file = coField.ref(FileStream);
}
```@categoryCoValuesFileStream.FileStream.createFromBlob(blob: Blob | File, options?: {
    owner?: Group | Account;
    onProgress?: (progress: number) => void;
} | Account | Group): Promise<FileStream>Create a `FileStream` from a `Blob` or `File`
@example```ts
import { coField, FileStream } from "jazz-tools";

const fileStream = await FileStream.createFromBlob(file, {owner: group})
```@categoryContentcreateFromBlob(const mediumSizeBlob: BlobmediumSizeBlob);

const const highestRes: {
    res: `${number}x${number}`;
    stream: import("/vercel/path0/packages/jazz-tools/dist/tools/coValues/coFeed").BinaryCoStream;
} | undefinedhighestRes = const ImageDefinition: CoMapSchema<{
    originalSize: ZodTuple<[ZodNumber, ZodNumber], null>;
    placeholderDataURL: ZodOptional<ZodString>;
}, FileStreamSchema, Account | Group> & {
    ...;
}@categoryMediaImageDefinition.function highestResAvailable(imageDef: ImageDefinition, options?: {
    maxWidth?: number;
    targetWidth?: number;
}): {
    res: `${number}x${number}`;
    stream: import("/vercel/path0/packages/jazz-tools/dist/tools/coValues/coFeed").BinaryCoStream;
} | undefinedhighestResAvailable(const image: {
    originalSize: [number, number];
    placeholderDataURL: string | undefined;
} & {
    [key: string]: FileStream;
} & CoMapimage);
var console: ConsoleThe `console` module provides a simple debugging console that is similar to the
JavaScript console mechanism provided by web browsers.

The module exports two specific components:

* A `Console` class with methods such as `console.log()`, `console.error()` and `console.warn()` that can be used to write to any Node.js stream.
* A global `console` instance configured to write to [`process.stdout`](https://nodejs.org/docs/latest-v20.x/api/process.html#processstdout) and
[`process.stderr`](https://nodejs.org/docs/latest-v20.x/api/process.html#processstderr). The global `console` can be used without importing the `node:console` module.

_**Warning**_: The global console object's methods are neither consistently
synchronous like the browser APIs they resemble, nor are they consistently
asynchronous like all other Node.js streams. See the [`note on process I/O`](https://nodejs.org/docs/latest-v20.x/api/process.html#a-note-on-process-io) for
more information.

Example using the global `console`:

```js
console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
//   Error: Whoops, something bad happened
//     at [eval]:5:15
//     at Script.runInThisContext (node:vm:132:18)
//     at Object.runInThisContext (node:vm:309:38)
//     at node:internal/process/execution:77:19
//     at [eval]-wrapper:6:22
//     at evalScript (node:internal/process/execution:76:60)
//     at node:internal/main/eval_string:23:3

const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr
```

Example using the `Console` class:

```js
const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);

myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err

const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
```
@see[source](https://github.com/nodejs/node/blob/v20.11.1/lib/console.js)console.Console.log(message?: any, ...optionalParams: any[]): void (+2 overloads)[MDN Reference](https://developer.mozilla.org/docs/Web/API/console/log_static)log(const highestRes: {
    res: `${number}x${number}`;
    stream: import("/vercel/path0/packages/jazz-tools/dist/tools/coValues/coFeed").BinaryCoStream;
} | undefinedhighestRes?.res: `${number}x${number}` | undefinedres); // 800x450

Docs issue?⌝Join Discord⌝

FileStreams

Connecting CoValues

ImageDefinition

#Creating Images

#Configuration Options

#Ownership

#Displaying Images with ProgressiveImg

#Using useProgressiveImg Hook

#Understanding ImageDefinition