CODEWITHSUNDEEP
javascripthtml
machina
machina

Reputation: 75

How to dynamically set background image url in CSS using Javascript

I've been trying to make this work for a little while now.

I thought the following code would work since I'm getting the value from the input and setting the background-image URL to said value.

Thanks!

The code inside of the head tag.

<script  type="text/javascript">

 function loadImg() {

  var imageUrl = $('#hostImage').attr('value')

  document.getElementById("upload-success-bg").style.backgroundImage=imageUrl

}

</script>

<style>

 #upload-success-bg {
 background-image: url();
 }

</style>

Input field code

<div class="status">

 <input class="image-url" type="text" id="hostImage" name="hostImage" required="true" 
 value="URL LOADS HERE">

</div>

Where I would like to the image to show

<div class="dropzone upload-success" id="upload-success-bg">
            <div class="info"><p>Drag image file here</p><p>Or click here to select image</p></div>
<input type="file" required="" class="input" accept="image/*"></div>

Upvotes: 3

Views: 15556

Answers (3)

Rigel1121
Rigel1121

Reputation: 2034

In jquery, you can do it this way:

 function loadImg() {

  var imageUrl = $('#hostImage').attr('value')

  $("#upload-success-bg").css("background-image", "url(" + imageUrl + ")");

}

Upvotes: 2

guest271314
guest271314

Reputation: 1

A File object does not have a URL property. A Blob URL or data URL can be created which points to the uploaded file. A Blob URLs lifetime is linked to the document which created the URL. A data URL string 

data:[<mediatype>][;base64],<data>

can be opened at a different window or browser.

You can use FileReader to convert File object to a data URL and set the <input type="text"> value to the FileReader instance result.

const input = document.querySelector("#file");
const [label] = input.labels;
const upload = document.querySelector("#upload-success-bg");
const uploadURL = document.querySelector("#hostImage");
const reader = new FileReader();

reader.addEventListener("load", e => {
  const {result} = reader;
  upload.style.backgroundImage = `url(${result})`;
  hostImage.style.width = `calc(${result.length}px)`;
  hostImage.value = result;
});

input.addEventListener("change", e => {
  const [file] = input.files;
  console.log(file)
  if (file && /^image/.test(file.type)) {
    reader.readAsDataURL(file);
  }
});
#file {
  display: none;
}

label[for="file"] {
  white-space: pre;
}
<div class="dropzone upload-success" id="upload-success-bg">
  <label class="info" for="file">
    Drag image file here
    Or click here to select image
  </label>
  <input type="file" required="" id="file" class="input" accept="image/*"></div>
<div class="status">
  <input class="image-url" type="text" id="hostImage" name="hostImage" required="true" readonly="true" value="URL LOADS HERE">
</div>

Upvotes: 1

dotconnor
dotconnor

Reputation: 1786

If you wish to use an URL for backgound and background-color CSS properties you have to use the url() syntax even within javascript, so changing your code to the following should work:

document.getElementById("upload-success-bg").style.backgroundImage = "url(" + imageUrl + ")"

Upvotes: 5

Related Questions