CODEWITHSUNDEEP
javascripthtmlcss
AL-zami
AL-zami

Reputation: 9066

equal padding around image inside a container div

I am working on a multiple file upload system.File upload works fine.Problem arises when i've decided to show a preview div before file reading complete.For this purpose i create a container div inside for loop and tried to insert image in that container.Problem is that the image inside the container doesn't have equal padding around it.How to fix this problem?

function handleDragOver(event) {
  event.stopPropagation();
  event.preventDefault();
  event.dataTransfer.dropEffect = 'copy';
  document.getElementById('drop_zone').innerHTML = "";
}

function handleDragLeave() {
  document.getElementById('drop_zone').style.background = 'white';
}

function handleFileSelect(event) {
  event.stopPropagation();
  event.preventDefault();

  var files = event.dataTransfer.files;

  for (var i = 0, file; file = files[i]; i++) {
    if (i >= files.length) {
      break;
    }
    (function(file) {

      var reader = new FileReader();

      var container = document.createElement('div');
      reader.onloadstart = function() {


        container.setAttribute('style', 'background:gray;text-align:center;padding:2px;width:100px;height:100px;margin:8px;float:left;border:1px solid gray;');
        document.getElementById('drop_zone').appendChild(container);

      };

      reader.onloadend = (function(myfile) {

        return function(event) {

          var img = new Image();
          img.src = event.target.result;
          img.width = 100;
          img.height = 100;
          container.style.background = 'white';
          container.style.width = '';
          container.style.height = '';
          container.appendChild(img);


        }

      })(file);


      reader.readAsDataURL(file);
    })(file);




  }


}

function handleFileUpload() {

  var dropZone = document.getElementById('drop_zone');
  dropZone.addEventListener('dragover', handleDragOver, false);
  dropZone.addEventListener('dragleave', handleDragLeave, false);
  dropZone.addEventListener('drop', handleFileSelect, false);

}
handleFileUpload();
<div id="drop_zone" style="width:95%;border:4px dotted gray;float:left;min-height:100px;text-align:center;line-height:100px;color:gray;font-size:25px;">
  Drop files here

</div>

Upvotes: 0

Views: 54

Answers (1)

Michael
Michael

Reputation: 140

The line-height of the #drop_zone is set to 100px which is causing the problem.

Set the line-height of the image to line-height: 0;

Upvotes: 1

Related Questions