CODEWITHSUNDEEP
javascripthtmlcssfile-upload
deekeh
deekeh

Reputation: 762

Setting file input as background for an HTML element

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>

Upvotes: 2

Views: 2385

Answers (3)

Ashifur Rahaman
Ashifur Rahaman

Reputation: 36

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";
};

Upvotes: 2

Giant Brain
Giant Brain

Reputation: 124

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.

Upvotes: 0

Quentin
Quentin

Reputation: 943615

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})`;
})

Upvotes: 1

Related Questions