Монтировать блок из drop and drop на JS

// SLIDER
const prev = document.getElementById("btn-prev"),
      next = document.getElementById("btn-next"),
      slides = document.querySelectorAll(".slide"),
      slidesWrapper = document.querySelectorAll(".slider-wrapper");
console.log('slide', slides)
let index = 0;

const activeSlide = n => {
    console.log(n)
    for(slide of slides) {
        slide.classList.remove('active');
    }
    slides[n].classList.add('active');
}
const nextSlide = () => {
    if(index == slides.length - 1) {
        index = 0
        activeSlide(index);
    } else {
        index++;
        activeSlide(index);
    }
}
const prevSlide = () => {
    if(index == 0) {
        index = slides.length - 1
        activeSlide(index);
    } else {
        index--;
        activeSlide(index);
    }
}
next.addEventListener('click', nextSlide)
prev.addEventListener('click', prevSlide)

<div class="slider-wrapper">
          <div class="slide active">
            <div class="solo__img"><img           src="./img/solo.svg">
            </div>
          </div>
          <div class="slide">
            <div class="solo__img"><img src="./img/slide2.png">
            </div>
          </div>
          <div class="btn">
            <div class="btn-prev" id="btn-prev"><img src="/img/btn-prev.svg">
            </div>
            <div class="btn-next" id="btn-next"><img src="/img/btn-next.svg">
            </div>
          </div>
        </div>

let dropArea = document.getElementById('drop-area');
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(dropName => {
    dropArea.addEventListener(dropName, preventDefaults, false)
})

function preventDefaults(e) {
    e.preventDefault()
    e.stopPropagation()
};

['dragenter', 'dragover'].forEach(dropName => {
    dropArea.addEventListener(dropName, highlight, false)
})

['dragenter', 'dragover'].forEach(dropName => {
    dropArea.addEventListener(dropName, highlight, false)
})

['dragleave', 'drop'].forEach(dropName => {
    dropArea.addEventListener(dropName, unhighlight, false)
})

function highlight(e) {
    dropArea.classList.add('highlight')
};

function unhighlight(e) {
    dropArea.classList.remove('highlight')
};

dropArea.addEventListener('drop', handleDrop, false);

function handleDrop(e) {
  let dt = e.dataTransfer
  let files = dt.files
  handleFiles(files)
};

function handleFiles(files) {
    files = [...files]
    files.forEach(uploadFile)
    files.forEach(previewFile)
}

function previewFile(file) {
    let reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onloadend = function() {
      let img = document.createElement('img')
      img.src = reader.result
      document.getElementById('gallery').appendChild(img)
    }
}

function uploadFile(file) {
  let div = document.createElement('div')
  div.innerHTML = file
}

<div class="drop" id="drop-area">
          <form class="my-form">
            <p>Загрузите изображения с помощью диалога выбора файлов или перетащив нужные изображения в выделенную область</p>
            <input type="file" id="fileElem" multiple accept="image/*" onchange="handleFiles(this.files)">
            <label class="button" for="fileElem">Выбрать изображения</label>
          </form>
          <div id="gallery"></div>
        </div>