useObjectUrl

Creates an URL for the provided File, Blob, or MediaSource via URL.createObjectURL() and automatically releases the URL via URL.revokeObjectURL() when the source changes or the component is unmounted

useObjectUrl manages the lifecycle of object URLs created from Blob, File, or MediaSource objects. It calls URL.createObjectURL() when the source is provided and automatically revokes the URL with URL.revokeObjectURL() when the source changes or the component unmounts, preventing memory leaks.

When to Use

• Previewing user-selected files (images, videos, PDFs) before upload
• Displaying Blob data from API responses as downloadable links or embedded media
• Creating temporary URLs for dynamically generated content (e.g., canvas exports)

Notes

• SSR-safe: Returns undefined during server-side rendering. No URL API access occurs on the server.
• Memory management: The hook automatically revokes old object URLs when the source changes or on unmount, preventing the memory leaks that commonly occur with manual createObjectURL usage.
• Related hooks: See also useFileDialog for selecting files from the user’s device.

Usage

function Demo() {
  const [file, setFile] = useState<File>();
  const url = useObjectUrl(file);

  const onFileChange = (e: ChangeEvent<HTMLInputElement>) => {
    const target = e.target;
    const files = target.files;
    setFile(files && files.length > 0 ? files[0] : undefined);
  };
  return (
    <div>
      <p>Select File</p>
      <input type="file" onChange={onFileChange} />
      <p>Object Url</p>
      <div>{url}</div>
    </div>
  );
};

API

useObjectUrl

Returns

string | undefined: Returns a URL created from the Blob or MediaSource object, or undefined if none exists

Arguments