Göz yaza bilər

Let’s start by looking at how to give Javascript access to our file. This bit is pretty much what you’d expect — we’ll be using an .

On Blobs, Files and Data URIs in Javascript

I’ve been working with Files, Blobs and DataURIs recently, and have found the whole thing just very confusing. What is the difference between the three, and how do the various methods around them work (createObjectURL, readAsDataURL and the various FileReader methods).

Because it’s not just one topic that I can StackOverflow my way out of, I decided to step back and try and piece together the different parts into a coherent model. That’s what this post is about…

First things first

We’ll be talking about files here. My initial impression was that files needed to be uploaded to a server for anything useful to happen with them.

Turns out, that’s just plain wrong.

There’s A LOT that you can do with file using just some good ole’ Javascript.

To give you a taste, here are a few examples:

• Reading file properties (name, file size, image dimensions)
• Converting files between different formats (e.g. png -> jpeg)
• Acccessing file contents

Remember, all this can be done ENTIRELY client-side.

We’ll cover ground in 2 main steps:

1. Accessing file contents
2. Modifying the DOM

Accessing file contents

Let’s start by looking at how to give Javascript access to our file. This bit is pretty much what you’d expect — we’ll be using an .

Once a user selects a file using the ‘Browse’ button, the change event is triggered. As soon as that’s done, we show the image.

The code below that does just that:

var input = document.querySelector('input[type=file]') input.addEventListener('change', onFileChange) function onFileChange()  var file = input.files[0] document.querySelector('img').src = URL.createObjectURL(file) > 

Here’s a demo �� you can try with any image. Go ahead, try it:

Pretty simple, huh? Works entirely offline too.

We’ll get to URL.createObjectURL() in a bit, but the point is that you’ve seen that we can access file “data” using just Javascript.

Blobs & Data URIs

I’ve been pretty vague in my use of the word “data” so far, so let’s clear that up. We can represent file contents in two primary forms, depending on how you’re using it:

1. Data URIs (Base64 encoded strings) — these are great when you’re stuffing the data directly into an HTML attribute (e.g. ). It all just works, without any Javascript in sight.
2. Blobs (or Binary Objects) — useful when you’re dynamically updating HTML attributes using Javascript (like we did with the image preview in the prior example). We’ll see that an uses Blobs.

If it’s still unclear, think about it this way: the difference between Data URIs and Blobs are like the difference between a glass of water and a lake:

When you’re handing someone a glass of water, you just – well – give it to them. Similarly, you can hand tags a DataURI and it would just display it like it’s a normal URL — without searching for the image or making an external HTTP call.

That’s not how it works with a lake though. You don’t just hand someone a lake. When you want someone to go see a lake, you send them directions to it. Similarly when you want someone to see a Blob, you don’t just add the Blob directly in the or . You have to give it an Object URL first, using createObjectURL (that we saw earlier).

Modifying the DOM

Blobs and DataURIs are often used in conjunction with these tags:

I’ve included a few examples below that illustrate how to modify the DOM using

DataURI ��

DataURIs can be passed directly into HTML elements like so:

 src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAA8UlEQVR4nO3X0Q2CMBQF0DeLcziIkzAKszAMu9QPIQFSqqUfEjgnaYiSkvqu5LURAAAAAAAAAAAAAAAAAADAuQzTyHlGRJquv3pNcx7T5zEi+sOruyGBnIxATuZIIGkxxs29XwIpzb+92kBSrAvcx7qopUAeO/PTkYVf1RDrf2xuzIF0kS9eik8QEeVAtuEt53ctP+JKat6QIfL9YPl9KZC9ftIX1nA7NYGMsf8Wzc8QSKPaQL7tmI4EUlrD7dQEstcDloXWQxrVBJLbJc2Nfg7ALqtR6zlkW0znEAAAAAAAAAAAAAAAAAAAAAAAAAD+5A1s+4fOp2st6wAAAABJRU5ErkJggg= nt">> 

… resulting in this:

let img = new Image() img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAA8UlEQVR4nO3X0Q2CMBQF0DeLcziIkzAKszAMu9QPIQFSqqUfEjgnaYiSkvqu5LURAAAAAAAAAAAAAAAAAADAuQzTyHlGRJquv3pNcx7T5zEi+sOruyGBnIxATuZIIGkxxs29XwIpzb+92kBSrAvcx7qopUAeO/PTkYVf1RDrf2xuzIF0kS9eik8QEeVAtuEt53ctP+JKat6QIfL9YPl9KZC9ftIX1nA7NYGMsf8Wzc8QSKPaQL7tmI4EUlrD7dQEstcDloXWQxrVBJLbJc2Nfg7ALqtR6zlkW0znEAAAAAAAAAAAAAAAAAAAAAAAAAD+5A1s+4fOp2st6wAAAABJRU5ErkJggg==" 

Any image can be represented as a Data URI. Here’s a handy tool that you can use to see what the Data URI representation of your image looks like:

Your Data URI output (�� choose a file first):

Blob �� (

We can’t pass Blobs directly into HTML elements; we’ll need to use Javascript for that. Let’s revisit the earlier example that shows an image preview when a file is selected:

 type="file"> 

var input = document.querySelector('input[type=file]') input.addEventListener('change', onFileChange) function onFileChange()  var file = input.files[0] document.querySelector('img').src = URL.createObjectURL(file) > 

We access our file using input.files[0] (or loop through them if multiple=true ). The cool part is that a file is just a Blob:

var file = input.files[0] file instanceof Blob /* is true */ 

To tie up the Blob with our image, we use a pointer in the form of an Object URL. That’s easy to do:

var objUrl = URL.createObjectURL(file); // objUrl common-applications">Common Applications

var input = document.querySelector('input[type=file]') input.addEventListener('change', onFileChange) function onFileChange()  var file = input.files[0] // set the src to 'blob://. ' document.querySelector('img').src = URL.createObjectURL(file) > 

var blob = elemFile.files[0]; // var img = new Image(); // set the onload *before* setting the img 'src' img.onload = e => console.log(`Your lovely image is $img.width> x $img.height>px`); img.src = URL.createObjectURL(blob); 

fetch('https://mywebsite.com/upload/',  method: 'POST', body: blob >) .then(response =>  if(response.ok) console.log('✅ All good in this hood!'); else throw Error('Run for it!'); >) 

var input = document.getElementById('myfile'); input.addEventListener('change', showDataURI); function showDataURI()  var output = document.getElementById('output'); var file = input.files[0]; var reader = new FileReader(); reader.onload = (e) =>  // set onload *before* calling readAsDataURL() output.innerText = e.target.result; > reader.readAsDataURL(file); > 

 type='file' id='file' onChange='performConversion()'>  id='preview'> 

function performConversion()  var preview = document.querySelector('#preview'); createImage(file.files[0]) .then(png => toJpg(png)) .then(jpg => preview.src = URL.createObjectURL(jpg)); > // Converts the blob to an Image (just like before) const createImage = (blob) => new Promise((resolve, reject) =>  if(blob.type != 'image/png') reject('Only accepts PNGs!'); var img = new Image(); img.onload = e => resolve(img); img.src = URL.createObjectURL(blob); >); // Converts the (PNG) image to JPG using Canvas const toJpg = (img) => new Promise((resolve, _) =>  var canvas = document.createElement('canvas'); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0); canvas.toBlob(resolve, 'image/jpeg', 0.15); // 15% quality �� >);