How to set background image of element to user uploaded image

Question

I have a file input element. I would like to attach an event listener that sets the background of a target element to the image that is uploaded by the user.

<input id='file' type='file'/>
<div id='frame'></div>

const frame = document.getElementById('frame');
const file = document.getElementById('file');
file.addEventListener('change', function() {
    // set the background image of `frame` to the uploaded image
});

How can I set the background image of frame to the image that is uploaded by the user?

Answer 1

You access files using Element#files

All element nodes have a files array on them which allows access to the items in this list.

^{- https://developer.mozilla.org/en-US/docs/Web/API/FileList}

You can get a data URI from the image by using FileReader#readAsDataUrl:

The readAsDataURL method is used to read the contents of the specified Blob or File. When the read operation is finished, the readyState becomes DONE, and the loadend is triggered. At that time, the result attribute contains the data as a data: URL representing the file's data as a base64 encoded string.

^{- https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL}

You can then assign the data URI to the background image property

const frame = document.getElementById('frame');
const file = document.getElementById('file');
const reader = new FileReader();
reader.addEventListener("load", function () {
  frame.style.backgroundImage = `url(${ reader.result })`;
}, false);
file.addEventListener('change',function() {
  const image = this.files[0];
  if(image) reader.readAsDataURL(image);
}, false)

#frame {
  width: 200px;
  height: 200px;
  background-size: cover;
}

<input id='file' type='file' />
<div id='frame'></div>

Answer 2

The best way of setting background image to HTML elements is by using CSS. The CSS background-image property requires a URL string in order to work. We can create a URL from the image uploaded using createObjectURL method from JavaScript's URL object.

The URL.createObjectURL() static method creates a DOMString containing a URL representing the object given in the parameter. The URL lifetime is tied to the document in the window on which it was created. The new object URL represents the specified File object or Blob object. ~MDN Web Docs

Therefore...

<input id='file' type='file'/>
<div id='frame'></div>


const frame = document.getElementById('frame');
const file = document.getElementById('file');
file.addEventListener('change', function() {
    // access the uploaded image file and generate URL
    const image = file.files[0];
    const bgUrl = URL.createObjectUrl(image);
    // set background image of frame
    frame.style.backgroundImage = `url(${bgUrl})`;
});