[p5.js 2.0+ Bug Report]: Blob URLs created by p5.File._load() for video/audio files are never revoked

[slash-init]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• WebGPU
• p5.strands
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

p5.js version

v2.3.1

Web browser and version

firefox 154.0

Operating system

Linux Fedora release 44

Steps to reproduce this

Steps:

1. Create a File representing a video or audio file.
2. Pass the file to p5.File._load(), which creates an object URL and exposes it through file.data.
3. Pass file.data to createImg(), then call img.remove(). Observe that URL.revokeObjectURL() is never called for the object URL created by _load().

Snippet:

test('does not revoke the object URL when the created image is removed', async () => {
  const blob = new Blob(['fake video'], { type: 'video/mp4' });
  const inputFile = new window.File([blob], 'test.mp4', {
    type: 'video/mp4'
  });

  const objectURL = 'blob:test-url';

  vi.spyOn(URL, 'createObjectURL').mockReturnValue(objectURL);
  const revokeObjectURL = vi.spyOn(URL, 'revokeObjectURL');

  let file;

  File._load(inputFile, loadedFile => {
    file = loadedFile;
  });

  const img = mockP5Prototype.createImg(file.data, '');
  img.remove();

  expect(revokeObjectURL).not.toHaveBeenCalled();
});

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms.

For guidance on contributing, check out our contributing guidelines and other resources for contributors.
💬 If you have questions or need support, feel free to join the Processing Foundation Forum or visit our Community page.
📜 Please also review our Code of Conduct to understand our community standards.
Thank You!

[slash-init]

hey! @ksen0
i'd like to work on this issue.
could i be assigned to it?

[ksen0]

hi @slash-init yes please go ahead! Thanks

[slash-init]

thanks! @ksen0
i dugged deeper into the issue and traced the life cycle from File._load() -> file.data -> createImg() -> Element.remove().
the main issue seems to be with the ownership, the blob url is created by File._load(). but once it's exposed as plain file.data string, createImg() has no way to know the ownership of the url if p5 created it or not.
simply revoking blob urls in remove() could also incorrectly revoke urls directely created by users.
i'm thinking fix could involve the tracking the ownership of blob urls created by p5 so that they can be revoked when no longer needed.
i'd like to confirm this approach before implementing a fix.