Vanilla JS: Xem preview khi kéo thả ảnh

https://viblo.asia/p/vanilla-js-xem-preview-khi-keo-tha-anh-V3m5WJOglO7

by trung ken

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<div class="container">
  <h2 class="my-5 text-center">Preview image when drag and drop</h2>
  <div id="dnd">
    <span>Drag and drop file here to preview</span>
  </div>
  <div class="preview"></div>
</div>

CSS

#dnd {
  height: 100px;display: flex;align-items: center;justify-content: center;margin: 0 auto 2rem;border: 2px dashed #ccc;
}
.drag-over {
  border-color: red !important;color: red;
 }
.preview-img {
  max-width: 150px;margin: 0 1em 1em 0;padding: 0.5em;border: 1px solid #ccc; border-radius: 3px;display: inline-block;
}

JavaScript

const dndElement = document.querySelector('#dnd')
const resultElement = document.querySelector('.preview')
const validImageTypes = ['image/gif', 'image/jpeg', 'image/png']

dndElement.addEventListener('dragover', function(e) {
  e.preventDefault()
  this.classList.add('drag-over')
})

dndElement.addEventListener('dragleave', function(e) {
  e.preventDefault()
  this.classList.remove('drag-over')
})

dndElement.addEventListener('drop', function(e) {
  e.preventDefault()
  this.classList.remove('drag-over')
  const files = e.dataTransfer.files;
  for (var i = 0; i < files.length; i++) {
    const file = files[i]
    renderPreviewImage(file)
  }
})

function renderPreviewImage(file) {
  const fileType = file['type']

  if (!validImageTypes.includes(fileType)) {
    resultElement.insertAdjacentHTML(
      'beforeend',
      '<span class="preview-img">Chọn ảnh đi :3</span>'
    )
    return
  }

  const fileReader = new FileReader()
  fileReader.readAsDataURL(file)

  fileReader.onload = function() {
    const url = fileReader.result
    resultElement.insertAdjacentHTML(
      'beforeend',
      `<img src="${url}" alt="${file.name}" class="preview-img" />`
    )
  }
}