Как сделать индикатор загрузки из тега?

Question

[Алексей]

Здравствуйте,

<a href="/Гет запрос" download="имя файла">Скачать файл</a>

С помощью тега "a" происходит скачивание файла.
На сервере при получении запроса с помощью fs.createReadStream() считывается файл и отправляется частями клиенту.
Как из этого реализовать индикатор/прогресс загрузки с сервера на чистом js? В идеале, как можно проще пример)

Comments

[scottparker]

один блок внутри другого, внешний обозначает фул загрузку, внутренний сколько загружено. ширина внутреннего изначально равно нулю, и постепенно увеличивается в % в зависимости от процесса считывания.

[Алексей]

Меня скорее интересует откуда брать информацию (тот самый процесс считывания). fs.createReadStream отправляет по частям файл и, кажется, сколько всего байтов весит файл. И на основе изменяемых данных можно уже делать математические расчеты по загрузке. Вот никак не найду, как взять эти данные((

Answer 1

[kocherman]

// Шаг 1: Создаём запрос серверу
let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits?per_page=100');

const reader = response.body.getReader();

// Шаг 2: получаем размер контента/файла
const contentLength = +response.headers.get('Content-Length');

// Шаг 3: читаем данные
let receivedLength = 0; // данных получено (байт)
let chunks = []; // массив кусочков файла
while(true) {
  const {done, value} = await reader.read();

  if (done) {
    break;
  }

  chunks.push(value);
  receivedLength += value.length;

  console.log(`Получено ${receivedLength} байт из ${contentLength} байт`)
}

// Шаг 4: соединяем кусочки в единный Uint8Array
let chunksAll = new Uint8Array(receivedLength); // (4.1)
let position = 0;
for(let chunk of chunks) {
  chunksAll.set(chunk, position); // (4.2)
  position += chunk.length;
}

// Шаг 5: декодируем в нужный формат
let result = new TextDecoder("utf-8").decode(chunksAll);

// Готово!
let commits = JSON.parse(result);
alert(commits[0].author.login);