HTML5 Blob Objects Made Easier
HTML5 Blob Objects Made Easier
Let us simplify HTML5 blob objects for you.
Join the DZone community and get the full member experience.
Join For FreeDeploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.
Lately, while getting ready for a HTML5 session, I found out that the File API specifications changed a little bit. In the past, in order to create a runtime Blob object you used the BlobBuilder object. That object is now deprecated and you should stop using it. Instead you are going to use the new blob object constructor which decrease the amount of code and objects you use.
Blob Object Constructor
The Blob constructor gets two parameters:
- Array of data that will be appended to the blob.
- Property bag that enable to configure the blob. You can use two properties: type and endings.
The type property indicate the content type of the Blob. The endings property gets two values: transparent and native. Those values indicate how strings containing \n are written (in native they are written to match host OS file system conventions). The transparent value is the default.
Here is an example of using the new constructor:
var blob = new Blob(['alert("hello")'], {type: 'text/javascript'});
In this code example, a blob object is created and is holding some JavaScript code.
Full Example – Create a Runtime JavaScript Script Tag Using a Blob
Here is a simple example to create a JavaScript script tag and attach it to the document’s body using the Blob API:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Blob</title>
<script type="text/javascript">
(function () {
window.URL = window.URL || window.webkitURL;
function contentLoaded() {
var blob = new Blob(['alert("hello")'], { type: 'text/javascript' });
var script = document.createElement('script');
script.setAttribute('src', window.URL.createObjectURL(blob));
document.body.appendChild(script);
}
window.addEventListener('DOMContentLoaded', contentLoaded, false);
} ());
</script>
</head>
<body>
<div id="container">
</div>
</body>
</html>
Running the code will produce an alert with the hello string.
Summary
The HTML5 specifications change from time to time and those changes can break your code. In this post, I wrote about a positive change in the specification regarding the use of blobs.
Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.
Like This Article? Read More From DZone
Published at DZone with permission of Gil Fink , DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}