Как сделать загрузку фалйа путём перетаскивания в блок div?

Question

Я написал следующий код, но файлы не загружаются

function dragOverHandler(ev) {
  console.log('File(s) in drop zone');

  // Prevent default behavior (Prevent file from being opened)
  ev.preventDefault();
}

function dropHandler(ev) {
  console.log('File(s) dropped');

  // Prevent default behavior (Prevent file from being opened)
  ev.preventDefault();

  if (ev.dataTransfer.items) {
    // Use DataTransferItemList interface to access the file(s)
    for (var i = 0; i < ev.dataTransfer.items.length; i++) {
      // If dropped items aren't files, reject them
      if (ev.dataTransfer.items[i].kind === 'file') {
        var file = ev.dataTransfer.items[i].getAsFile();
        console.log('... file[' + i + '].name = ' + file.name);
      }
    }
  } else {
    // Use DataTransfer interface to access the file(s)
    for (var i = 0; i < ev.dataTransfer.files.length; i++) {
      console.log('... file[' + i + '].name = ' + ev.dataTransfer.files[i].name);
    }
  }
}

<div id="drop_zone" ondragover="dragOverHandler(event);" class="upload">
  <img class="center-block" src="~/images/icons/upload.svg" />
  <p>Перенести вручную с компьютера в это место или</p>
  <input type="file" id="upload-file" name="File" value="@Model.File">
  <label class="ss-button ss-button-secondary" for="upload-file">Выбрать файл</label>
</div>

Answer 1

Использовал как-то такой вариант.

const dropArea = document.querySelector('.file-upload');
const input = document.querySelector('#file-upload__file');
const placeholder = document.querySelector('.file-upload__placeholder');

// UPLOAD FILES
const uploadFiles = files => {
  console.info(files);
  const filesName = [];
  [...files].map(file => filesName.push(file.name));
  placeholder.innerHTML = filesName.join(', <br>')
}

// DRAG AND DROP
let droppedFiles = false;
['drag', 'dragstart', 'dragend', 'dragover', 'dragenter', 'dragleave', 'drop'].map(eventName => {
  dropArea.addEventListener(eventName, e => {
    e.preventDefault();
    e.stopPropagation();
  });
});

['dragover', 'dragenter'].map(eventName => {
  dropArea.addEventListener(eventName, e => {
    dropArea.classList.add('file-upload--drag-over');
  });
});

['dragleave', 'dragend', 'drop'].map(eventName => {
  dropArea.addEventListener(eventName, e => {
    dropArea.classList.remove('file-upload--drag-over');
  });
});

dropArea.addEventListener('drop', e => uploadFiles(e.dataTransfer.files));

// CLICK INPUT
input.addEventListener('change', e => uploadFiles(e.target.files));

.file-upload {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 150px;
  border-radius: 10px;
  border: 2px dashed #ccc;
  background-color: #eee;
  cursor: pointer;
}

.file-upload--drag-over {
  background-color: transparent;
  border-color: #09f;
}

#file-upload__file {
  display: none;
}

<label class="file-upload" for="file-upload__file">
  <input id="file-upload__file" type="file" name="files" multiple/>
  <div class="file-upload__placeholder">Перенесите сюда файлы</div>
</label>

БЛОГ НА HUSL

Как сделать загрузку фалйа путём перетаскивания в блок div?

Ответы (1 шт):