Using URL.createObjectURL() to create uploaded image previews in Javascript

๐Ÿ“– Neural networks for Javascript developers

The Neural Networks for JavaScript developers book is almost ready! Learn the basics of AI with TensorFlowJs examples. Join now the presale and get a 15$ coupon off the launching price!

While working on the example for the image object detection with TensorJs I needed a way to preview the upload of an image.

After some research, I found that one of the easiest ways is to use the URL.createObjectURL() method.

What it does is to get as a parameter a given object, in our case the uploaded image, and return a string containing the URL for the blob data object of that image.

The blob data object will be kept in the document memory space until the document is unloaded or the URL is explicitly released.

So, if we have the below markup:

<input id="inp" type='file' accept='image/*' capture='camera'/>

And this Javascript:

const input = document.querySelector('#inp')

input.addEventListener('change', () => {
  const url = window.URL.createObjectURL(input.files[0])
  console.log(url)
}) ๐ŸŒผ

When we select an image, the url output will be similar to the one below:

blob:https://cdpn.io/75e3de17-c6e5-48ae-acc5-88dbec499649

We can even navigate to that URL and see the actual image.

And the nice part is that we can easily take this URL and set it as the src of an image element.

Finally, just add a link with the download attribute if we want to have the option to download that file.

Using URL.createObjectURL() to create uploaded image previews in Javascript code logic

The Javascript will make sure to putย the url variable as the href for the download link plus the src for the image:

const input = document.querySelector('#inp')
const link = document.querySelector('#dwn')
const img = document.querySelector('#img')

input.addEventListener('change', () => {
  const url = window.URL.createObjectURL(input.files[0])
  img.src = url
  console.log(url)
  link.setAttribute( "href", url )
})

You can check out the full working codepen here.

As a final note keep in mind that when we create Object URLs, the browser will keep them in memory until the document is unloaded (the browser window is closed) or until the URL is explicitly released.

We can manually unload the created blob data object by using:

URL.revokeObjectURL(objectURL)

๐Ÿ“– Neural networks for Javascript developers

The Neural Networks for JavaScript developers book is almost ready! Learn the basics of AI with TensorFlowJs examples. Join now the presale and get a 15$ coupon off the launching price!


Leave a Reply

Your email address will not be published. Required fields are marked *

Home Screencasts Best of Newsletter Search X

Neural Networks for JavaScript developers
Presale - 15$ free coupon

Hi friend! Before you go, just wanted to let you know that in March 2023 I will be launching the TensorFlow.Js by Example course.

This course will include basic concepts of AI and Neural Networks done with TensorFlowJs such as:

  • Working with datasets
  • Visualizing training
  • Deep Neural Networks in JavaScript
  • Reinforcement Learning
  • Convolutional neural networks
  • and much more ...

Also, there will be a lot of examples as:

  • Object detection
  • Natural language processing
  • Face and voice recognition
  • Gaming AI

Join now the waiting list and get a 15$ coupon off the launching price!

X