CSS Question

How to prevent this Multiple drag and drop image file from duplicate

I have here 3 div from my drag and drop image file, the file names are array and i calling it using the class then i loop it. My problem is when i try to put image file in specific div, one of those 3 div, it duplicates the image to all of the remaining div. How do i prevent this and allow me to put image only in my chosen div?

Here is my code https://jsfiddle.net/qm9nkco7/2/

Html

<div class="sideBar_paddIT">
<input type="file" name="file_name[]" class="file_class" id="file_id0">
<div class="drag_here">
<div class="drag_me" id="drag_me_id">
<img class="img_here" src="" width="100%" >

<center class="center_html">
Click or Drag image here
</center>

</div>
</div>
</div>

<div class="sideBar_paddIT">
<input type="file" name="file_name[]" class="file_class" id="file_id0">
<div class="drag_here">
<div class="drag_me" id="drag_me_id">
<img class="img_here" src="" width="100%" >

<center class="center_html">
Click or Drag image here
</center>

</div>
</div>
</div>

<div class="sideBar_paddIT">
<input type="file" name="file_name[]" class="file_class" id="file_id0">
<div class="drag_here">
<div class="drag_me" id="drag_me_id">
<img class="img_here" src="" width="100%" >

<center class="center_html">
Click or Drag image here
</center>

</div>
</div>
</div>


JS

$(document).on('click','.drag_me', function(){
$('.file_class').trigger('click');
});


var imageLoader = document.getElementsByName('file_name[]');
for(var i= 0; i < imageLoader.length; i++){
imageLoader[i].addEventListener('change', handleImage, false);
}


function handleImage(e) {
e.stopPropagation();
e.preventDefault();


if(e.target.files.length === 0){
return false;
}
var reader = new FileReader();
reader.onload = function (event) {
$('.drag_me .img_here').attr('src',event.target.result);
}

var taste_it = e.target.files[0];

var file_name = taste_it.name;
var file_size = taste_it.size;
var file_type = taste_it.type;
if(!check(file_type)){
$('.trigger_danger_alert_changable').show().delay(5000).fadeOut();
$('#palitan_ng_text').html('Invalid file format');
return false;
}
if(file_size > 1500000){
$('.trigger_danger_alert_changable').show().delay(5000).fadeOut();
$('#palitan_ng_text').html('File size too large');
$('.file_class').val(''); // <-- kaya d nag aalert dahil may laman,
return false;
}else{

reader.readAsDataURL(e.target.files[0]);
$('.center_html').hide();
$('.image_name').html(file_name).css({'font-size' : '14px', 'color' : 'black'});

}
}

var obj = $('.drag_me');

obj.on('dragover', function(e){
e.stopPropagation();
e.preventDefault();
$(this).css('border', '2px solid #39ADCD');

});



obj.on('drop', function(e){
e.stopPropagation();
e.preventDefault();
$(this).css('border', '2px dotted #39ADCD');

var files = e.originalEvent.dataTransfer.files;
var file = files[0];

var file_name = file.name;
var file_size = file.size;
var file_type = file.type;
if(!check(file_type)){
$('.trigger_danger_alert_changable').show().delay(5000).fadeOut();
$('#palitan_ng_text').html('Ivalid file format');
return false;
}

if(file_size > 1500000){
$('.trigger_danger_alert_changable').show().delay(5000).fadeOut();
$('#palitan_ng_text').html('File size too large');
return false;
}else{


for(var i = 0; i<imageLoader.length; i++){
imageLoader[i].files = files;
}
$('.center_html').html(file_name).css({'font-size' : '14px', 'color' : 'black'});




}

});
function check(image){
switch(image){
case 'image/jpeg':
return 1;
case 'image/jpg':
return 1;
case 'image/png':
return 1;
case 'image/gif':
return 1;
default:
return 0;
}
}


Anyone can help me

Answer
  1. Don't use identical ids for multiple elements
  2. The <center> tag is deprecated. Use style="text-align: center;", preferably in a class.

Now onto your actual problem, which comprises of two parts:


$('.drag_me .img_here').attr('src', event.target.result);

This line assigns event.target.result to the src attribute of every .drag_me .img_here element.


$(document).on('click','.drag_me', function(){
    $('.file_class').trigger('click');
});

This causes a click on any .drag_me element to trigger clicks on every .file_class element.


Both of these issues can be solved by not using identical ids for different elements, then referencing those ids to specify an individual element to target:

HTML: Notice the new ids of the .drag_me and .file_class elements

<div class="sideBar_paddIT">
  <input type="file" name="file_name[]" class="file_class" id="file_id_0">
  <div class="drag_here">
    <div class="drag_me" id="drag_me_id_0">
      <img class="img_here" src="" width="100%">

      <center class="center_html">
        Click or Drag image here
      </center>

    </div>
  </div>
</div>

<div class="sideBar_paddIT">
  <input type="file" name="file_name[]" class="file_class" id="file_id_1">
  <div class="drag_here">
    <div class="drag_me" id="drag_me_id_1">
      <img class="img_here" src="" width="100%">

      <center class="center_html">
        Click or Drag image here
      </center>

    </div>
  </div>
</div>

<div class="sideBar_paddIT">
  <input type="file" name="file_name[]" class="file_class" id="file_id_2">
  <div class="drag_here">
    <div class="drag_me" id="drag_me_id_2">
      <img class="img_here" src="" width="100%">

      <center class="center_html">
        Click or Drag image here
      </center>

    </div>
  </div>
</div>

JavaScript: See the comments /**** ... ****/

$(document).on('click', '.drag_me', function(ev) {
  /**** Get the specific element using the number in the id attribute ****/
  var idNum = $(this).attr('id').split('_')[3];
  $('.file_class').eq(idNum).trigger('click');
});


var imageLoader = document.getElementsByName('file_name[]');
for (var i = 0; i < imageLoader.length; i++) {
  imageLoader[i].addEventListener('change', handleImage, false);
}


function handleImage(e) {
  e.stopPropagation();
  e.preventDefault();

  /**** Get the current input field by using the number in the id attribute ****/
  var currentInput = e.target.id.split('_')[2];

  if (e.target.files.length === 0) {
    return false;
  }
  var reader = new FileReader();
  reader.onload = function(event) {
    /**** Use the current input field instead of all the input fields ****/
    $('#drag_me_id_' + currentInput + ' .img_here').attr('src', event.target.result);
  }

  var taste_it = e.target.files[0];

  var file_name = taste_it.name;
  var file_size = taste_it.size;
  var file_type = taste_it.type;
  if (!check(file_type)) {
    $('.trigger_danger_alert_changable').show().delay(5000).fadeOut();
    $('#palitan_ng_text').html('Invalid file format');
    return false;
  }
  if (file_size > 1500000) {
    $('.trigger_danger_alert_changable').show().delay(5000).fadeOut();
    $('#palitan_ng_text').html('File size too large');
    $('.file_class').val(''); // <-- kaya d nag aalert dahil may laman,
    return false;
  } else {

    reader.readAsDataURL(e.target.files[0]);
    $('.center_html').hide();
    $('.image_name').html(file_name).css({
      'font-size': '14px',
      'color': 'black'
    });

  }
}

/** Rest of the code is unchanged **/

See New Fiddle Here

Comments