Opera Blobs

Working With Opera Blobs: A Practical Walkthrough

Blob handling in the Opera browser has always been one of those things that works fine until it doesn't. The basic concept is simple enough. A blob is a binary large object that the browser stores in memory or cache so you can work with file-like data without ever hitting the disk. Opera supports them the same way any Blink-based browser does, which means most of the behavior is inherited from Chromium's implementation rather than something unique to Opera itself. If you're trying to use them in a web app, the API surface is URL.createObjectURL() and URL.revokeObjectURL(). That's essentially it for the standard path. The tricky part is knowing when Opera's handling of blobs diverges from what you'd expect based on Chrome or Firefox. I ran into this specifically last year when I was building a document upload flow for an internal tool. The app let users drag and drop PDFs, create a blob URL from the File object, and display a preview. Everything worked in Chrome and Firefox. Opera would render the first page of the PDF just fine, but after navigating away from the page and coming back, the blob URL would come back as expired even though I hadn't revoked it. The actual cause turned out to be Opera's aggressive cache cleanup on tab suspension. When the tab goes into background mode, Opera frees blob URLs sooner than Chromium does. The workaround wasn't elegant but it was reliable: store the actual File or ArrayBuffer in IndexedDB instead of relying on a blob URL to persist across tab suspensions. When the user comes back, grab the raw data and re-create the URL on demand. IndexedDB keeps the data alive regardless of what the browser decides to do with its cache. Another thing that trips people up is the size limit. Opera, like most Blink browsers, has an internal cap on how large a single blob can be before creation starts failing or causing memory pressure. The documented limit isn't really documented anywhere official, but in practice I've seen operations fail around 2 to 4 gigabytes on a typical desktop build. Mobile is considerably tighter. If you're working with large files, especially on mobile Opera, chunk the data or fall back to server-side processing rather than trying to hold it all in a blob.

How to Create and Manage Blobs in Opera

Creating a blob is straightforward. You pass data and an optional MIME type to the Blob constructor. Something like this: const myBlob = new Blob([arrayBuffer], { type: 'application/pdf' }); Then create the URL:

const blobUrl = URL.createObjectURL(myBlob); Assign that URL wherever you need it. An iframe src, an anchor href, an img tag. When you're done, call URL.revokeObjectURL(blobUrl). This frees the memory. If you don't call it, Opera holds the reference until the page unloads, which is usually fine for short-lived pages but becomes a real problem on single-page applications that never actually unload. The common mistake beginners make is revoking too early. If you revoke the URL while an image or download is still in flight, Opera will silently fail to load or fetch the resource. The error is often non-descript. You'll see a broken image or a failed fetch with no clear reason. The fix is to attach your revocation to the load or error event of the element consuming the blob URL, or to wrap it in a setTimeout that gives the browser enough time to kick off the request first.

Where Opera Blobs Fall Apart

I should be upfront about the limitations because most guides gloss over this stuff. Blob URLs in Opera are not the same stability-wise as they are in Chrome. The tab-suspension behavior I mentioned earlier is the biggest one. There's also the matter of blob URL scope. In Opera, blob URLs are tied to the browsing context that created them. Cross-origin iframes can't access blob URLs from the parent frame the way they sometimes can in other browsers. If your architecture involves an iframe loading content from a different origin and you need to serve it blob data, you'll need to create the blob inside the iframe itself. Performance is another area worth mentioning. Creating blob URLs from very large Data URLs or buffer copies can freeze the main thread for a noticeable amount of time. I've seen 800-megabyte operations stall the UI for three to five seconds on mid-range hardware. If you're dealing with large payloads, move the blob creation into a Web Worker. The worker can construct the blob and post the resulting URL back to the main thread without blocking rendering. For most everyday use cases, Opera blobs work exactly as advertised. The edge cases only surface when you push them into production scenarios with suspended tabs, large files, or cross-origin iframe architectures. Knowing where the breaking points are saves you a lot of debugging time.