Как реализовать drag n drop с анимацией загрузки?

Question

[Lord_Dantes]

Есть форма в которую можно переместить файл, но есть еще момент где мне нужно реализовать блок того как файл загружается, блок я сверстал но не понимаю как отловить момент загрузки файла и получать данные о его статусе.
Подскажите пожалуйста примеры или ссылку как отследить этот момент?

Код

Answer 1

[hzzzzl]

я у себя открывал вебсокет с сервером (socket.io), в браузере

const socket = io('http://localhost:3000');

socket.on('progress', function (data) {
  // сколько % загружено на сервер
  const progress = Math.round(data.bytesReceived / data.bytesExpected * 100)  
  progressBar.style.width = progress + '%'   // CSS ширина прогресс бара
});

на сервере node.js

const formidable = require('formidable')
const form = new formidable.IncomingForm();

.....

// событие progress у загружаемой формы
  form.on('progress', function (bytesReceived, bytesExpected) {
    var progress = {
      type: 'progress',
      bytesReceived: bytesReceived,
      bytesExpected: bytesExpected
    };

    // шлем событие progress в браузер
    req.io.sockets.emit('progress', progress);

  });