Using Multiple file inputs to set background image of multiple divs

Question

What I'm trying to do:

1 - How can I use a second file input to set the background image of a class of divs, in this case the class .logo? (currently, I have one file input, which is setting the background image for the class .background, but I need to add a second file input)

2 - How can I include a link that will "delete" or "trash" the file selected via the file input in order to reset a class of divs as having no background image?

Here is how I've tried to work through this problem so far:

I tried to add a second button, and duplicate the JS and then change the class names, however this broke everything. So I've provided two buttons for the file inputs here. Also, I tried to search for how to delete a file input once uploaded, but I could not understand anything I found. I read through this question about clearing a form, but I could not successfully apply what was described.

Here's what I've tried so far:

$('.verborgen_file').hide();
$('.uploadButton').on('click', function() {
  $('.verborgen_file').click();
});

$('.verborgen_file').change(function() {
  var file = this.files[0];
  var reader = new FileReader();
  reader.onloadend = function() {
    $('.background').css('background-image', 'url("' + reader.result + '")');
  }
  if (file) {
    reader.readAsDataURL(file);
  } else {}
});

.background {
  background-image: url("");
  background-position: center;
  width: 100%;
  border: 0px dashed #ddd;
  background-color: #fbfbfb;
  padding: 10px;
}

.background:hover {
  cursor: move;
}

div.bg-img {
  background-position: center;
  background-repeat: no-repeat;
}

.responsive {
  background-image: url("");
  background-size: 120%;
  background-position: center;
  min-height: 20vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.medium {
  background-image: url("");
  background-size: cover;
  background-position: center;
  height: 150px;
  width: 100%;
  margin-top: 15px;
  margin-bottom: 15px;
  position: relative;
}

.logo {
  height: 50px;
  width: 80px;
  background-color: #eee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inputSection">
<h1>Input Section</h1>
Background:
<input type='file' class='verborgen_file' />
<input type="button" value="Upload" class="uploadButton" />
<a href="">delete</a>
<br> Logo:
<input type="button" value="Upload" class="uploadButton" /><a href="">delete</a>
</div>

<br>
<div class="imageSection">
<h1>Divs with Images Section</h1>
<div class="background responsive bg-img">
  <div class="logo">
  </div>

</div>

<div class="background medium bg-img">
  <div class="logo">
  </div>
</div>
</div>

You haven't defined what the specific problem or question is as outlined in [ask] — charlietfl, Apr 15 '18 at 10:53
I've edited the original question. Does this look better? Do you have any knowledge about how to help with what I'm trying to figure out? — johnny555, Apr 15 '18 at 10:59
Well, you have described what you attempt to do but not the problems you faced when you were trying. — Hikarunomemory, Apr 15 '18 at 12:08
I've updated the question to include a description of how I've tried to work through this problem so far, and the obstacles I've faced. Do you have any knowledge of how to help me resolve this issue? — johnny555, Apr 15 '18 at 12:35
Am I still doing something wrong in the way that I'm asking the question? — johnny555, Apr 15 '18 at 13:40

Hikarunomemory · Accepted Answer · 2018-04-17T04:39:23.750

In my experience, I would suggest to put the files that being selected by input in an array for further works.

But in your case, it would be simple. (However, the HTML structure makes this problem a little more complex.)

I added some input in HTML and added some data-attribute to <input> and <a>.

And, see comments below...

Edit: Since you separated them and put into another div, the parent() would be that div. Our goal is looking for the div contains both inputSection and imageSection, so replace parent() with parents('.container'). That's it!

$('.verborgen_file').hide();

$('.uploadButton').on('click', function() {
  // find relative input and trigger click event
  var id = $(this).data('id')
  var target = $(this).siblings('input[data-id=' + id + ']')
  target.click();
});

$('.verborgen_file').change(function() {
  var $this = $(this)
  var file = this.files[0];
  var id = $(this).data('id')

  var reader = new FileReader();
  reader.onload = function() {
    // find either .background or .logo class in container and change the image
    $('body').find('div[data-id='+ id +']').css('background-image', 'url("' + reader.result + '")');
  }
  if (file) {
    reader.readAsDataURL(file);
  } else {
    // if file doesn't exist, clear the image
    $('body').find('div[data-id='+ id +']').css('background-image', '');
  }
});

$('a').on('click', function(e) {
  e.preventDefault()
  var $this = $(this)
  var id = $this.data('id')
  var inputID = $this.siblings('input[data-id=' + id + ']').attr('id')
  // clear the relative input and trigger change event
  $('#' + inputID).val('').trigger('change')
})

.background {
  background-image: url("");
  background-position: center;
  width: 100%;
  border: 0px dashed #ddd;
  background-color: #fbfbfb;
  padding: 10px;
}

.background:hover {
  cursor: move;
}

div.bg-img {
  background-position: center;
  background-repeat: no-repeat;
}

.responsive {
  background-image: url("");
  background-size: 120%;
  background-position: center;
  min-height: 20vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.medium {
  background-image: url("");
  background-size: cover;
  background-position: center;
  height: 150px;
  width: 100%;
  margin-top: 15px;
  margin-bottom: 15px;
  position: relative;
}

.logo {
  height: 50px;
  width: 80px;
  background-color: #eee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <h1>Input Section</h1>
  <div class="inputSection">
    Background:
    <input id="bgInput1" type='file' class='verborgen_file' data-id="background1" />
    <input type="button" value="Upload" class="uploadButton" data-id="background1" />
    <a href="" data-id="background1">delete</a>
    <br> Logo:
    <input id="logoInput1" type='file' class='verborgen_file' data-id="logo1" />
    <input type="button" value="Upload" class="uploadButton" data-id="logo1" />
    <a href="" data-id="logo1">delete</a>
  </div>

  <br>
  <div class="imageSection">
    <h1>Divs with Images Section</h1>
    <div class="background responsive bg-img" data-id="background1">
      <div class="logo" data-id="logo1">
      </div>
    </div>
    <div class="background medium bg-img" data-id="background1">
      <div class="logo" data-id="logo1">
      </div>
    </div>
  </div>
</div>

<div class="container">
  <h1>Input Section</h1>
  <div class="inputSection">
    Background:
    <input id="bgInput2" type='file' class='verborgen_file' data-id="background2" />
    <input type="button" value="Upload" class="uploadButton" data-id="background2" />
    <a href="" data-id="background2">delete</a>
    <br> Logo:
    <input id="logoInput2" type='file' class='verborgen_file' data-id="logo2" />
    <input type="button" value="Upload" class="uploadButton" data-id="logo2" />
    <a href="" data-id="logo2">delete</a>
  </div>

  <br>
  <div class="imageSection">
    <h1>Divs with Images Section</h1>
    <div class="background responsive bg-img" data-id="background2">
      <div class="logo" data-id="logo2">
      </div>
    </div>
    <div class="background medium bg-img" data-id="background2">
      <div class="logo" data-id="logo2">
      </div>
    </div>
  </div>
</div>

Ahh! ok, this still breaks. I think the issue is the top level div class of .container. Is there a way for the inputs to be placed in any other div and still function as they do now, where the image-background divs are in any other div on a given page? — johnny555, Apr 17 '18 at 04:31
This is not a good way since you have to set `data-id` attribute everywhere but works in the situation you mentioned. — Hikarunomemory, Apr 17 '18 at 04:41
Ok, let me redo the html so it reflects what I'm really trying to do. Give me a minute. — johnny555, Apr 17 '18 at 04:57
please see this codepen: https://codepen.io/db13/pen/ce3e54a83dc0ef6717320e2dea80842b — johnny555, Apr 17 '18 at 05:23
I'm not sure if its my HTML structure, or maybe some other existing JS that is breaking everything. — johnny555, Apr 17 '18 at 05:25
I've searched and searched for how to solve this, but I cannot understand what I am doing wrong. — johnny555, Apr 17 '18 at 05:25
do you think it has to do with my HTML structure? or is there anything more you can tell me about the 'data-id' issue? — johnny555, Apr 17 '18 at 05:27
You have to add `data-id` attribute at anywhere you want to display the image. Like `
` and `
`. — Hikarunomemory, Apr 17 '18 at 05:31

Using Multiple file inputs to set background image of multiple divs

1 Answers1