Browser / Javascript - Object URL (createObjectURL / revokeObjectURL)

Browser / Javascript - Object URL (createObjectURL / revokeObjectURL)

About

An ObjectUrl is the representation of blob object as a data URL strings that can be used with any fetch HTML element that accepts an URL as an attribute.

Example

Raw HTML

Example: This HTML was generated with the code in the next example.

<a href="blob:https://datacadamia.com/35a824bb-3a18-42d0-81c9-24df9aa548b2">Hello-world.txt</a>

The id blob:https://datacadamia.com/4067f3b2-dba2-4bdc-8199-e86fd670aa67 is:

  • temporary,
  • generated
  • and managed by the browser.

If you encounter this kind of URL, just copy, paste them into a new tab to see the content

Example:

Blob Url In Browser Address

The javascript browser api function URL.createObjectURL creates an ObjectUrl that represents a data uri that can then be passed as URL.

Example to download a text file:

let textBlob = new Blob( ["Hello World !"], { type: 'text/plain' });
  • Create the ObjectUrl
let objectUrl = URL.createObjectURL(textBlob);
  • Create the anchor with its download attribute
let a = document.createElement("a");
document.body.append(a);
a.href=objectUrl;
let fileName = "hello-world.txt";
a.setAttribute("download",fileName);
a.innerText = `Download ${fileName}`;
// To prevent memory leaks, always revoke the URL after the download.
a.addEventListener('click', (e) => {
    setTimeout(() => URL.revokeObjectURL(e.target.href), 30 * 1000);
});
  • Result:

Management

createObjectURL

You can create a ObjectURL with the URL function URL.createObjectURL()

const objectURL = URL.createObjectURL(object)

where: the object parameter may be a File, Blob, or MediaSource object

Usage as src or href

img.src = URL.createObjectURL(object);
a.href = URL.createObjectURL(object);

revokeObjectURL

Because createObjectURL creates at each invocation a new object, you need to delete it with the URL.revokeObjectURL() method after usage.

img.onload = function() {
    URL.revokeObjectURL(this.src);
}
a.addEventListener('click', (e) => {
    setTimeout(() => URL.revokeObjectURL(e.target.href), 30 * 1000);
});

Get blob object from ObjectURL

You can get a blob object by fetching the URL

let blob = await fetch(url).then(r => r.blob());





Discover More
How to create and manipulate an URL in Javascript? (Browser URL Object)

This article shows you how to get and manipulate an URL with Javascript. URL You can manipulate an URL with the URL web API object Build an URL object Print a URL properties (...host, hostname,...)...
Html Input File Multiple Warning Dialog
How to handle files in Javascript with the File API of the Browser?

The file api is a browser javascript api that allows file system operation in the browser. FileApiopeneditsave Uploading a file: You can open and read files via the input of type file The...
How to manipulate a Binary large object (BLOB) with Javascript?

The blob object is a data container for blob content This is the API to work with binary data in the browser and is widely supported Because any type of data is...
URL - The data URL scheme

The data scheme is a scheme that can be used in a URL in order to embed (small) media resources data directly such as: images style sheets or any resource. The benefit is that there is no need...
Web Resource - Scheme

A scheme is the first part of an URI. It refers to a network protocol (called also specification) that should be used to communicate with the service defines in the authority part of the URL The scheme...



Share this page:
Follow us:
Task Runner