Setting file input as background for an HTML element

Question

I am creating a UI where the user wants to upload her profile picture using <input type="file"> by clicking on its corresponding <label>. I want to show the preview of the image as the background of the same <label>. I tried to use inputNode.files[0] in JavaScript but it does not work.

I am also working on a button X which clears the selected file field values and essentially the background image too but that's the next step of the goal. Some guidance regarding this is also welcome, since I have not thought about this either.

document.getElementById("avatar").onchange = function(e) {
  console.log("file changed", e.target.files[0]);
  // document.getElementById("preview-img");
  document.getElementById("avatar-label").style.backgroundImage = e.target.files[0];
  // document.getElementById("avatar-label").style.backgroundImage = 'url("https://picsum.photos/70/70")';
};

#avatar {
  display: inline-block;
  height: 0;
  width: 0;
}

#avatar-label {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 70px;
  width: 70px;
  border: solid 1px #333;
  /*background: url('https://picsum.photos/70/70');*/
}

#avatar-label:hover {
  cursor: pointer;
}


/* styling for unselecting the image */

#avatar-label #unselect-image {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  border: none;
  outline: none;
  background: #fff;
}

<form action="" method="get">
  <input accept="image/*" type="file" name="avatar" id="avatar">
  <label for="avatar" id="avatar-label">
    +
    <button type="button" id="unselect-image">X</button>
  </label>
  <img src="" alt="" id="preview-img">
</form>

Sometimes the problem is the browser cache.. You could upload the image turn into base64 string and update the img src width the base64 string.. hope it helps — Rui Caramalho, Jul 13 '21 at 16:01

Ashifur Rahaman · Accepted Answer · 2021-07-13T17:06:22.040

Showing in background

Use file reader instead of directly assigning the image object.

You may change your script to show background image as below

document.getElementById('avatar').onchange = function (e){
    var file = e.target.files[0];

    var reader = new FileReader();
    reader.onloadend = function(){
        document.getElementById('avatar-label').style.backgroundImage = "url(" + reader.result + ")";
        document.getElementById('unselect-image').style.display = "inline";
    }
    if(file){
        reader.readAsDataURL(file);
    }
}

Clearing the background

For clearing the background image the following script may help

document.getElementById('unselect-image').onclick = function (){
    document.getElementById('avatar-label').style.background = "none";
    document.getElementById('unselect-image').style.display = "none";
};

score 1 · Answer 2 · answered Jul 13 '21 at 15:58

The value of the background-image property in CSS is a string consisting of url(, followed by a URL, followed by ).

It is not a file object.

So you need to take that file object and convert it into a URL. This answer to another question explains how to do that.

Then you need to wrap the result in url( and ) and assign it:

.then( data => {
    document.getElementById("avatar-label").style.backgroundImage = `url(${data})`;
})

score 0 · Answer 3 · answered Jul 13 '21 at 16:19

0

Here are making thumbnail on uploading image

And to clear selected field is simple.

You assign '' into "src" property of html "img" element and value property of html "input" element.

Replace "label" with "img" if possible.

answered Jul 13 '21 at 16:19

Giant Brain

124
1
13

Setting file input as background for an HTML element

3 Answers3