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

Question

[Al]

Есть nodejs-приложение с express 4.x. Примерно так в данный момент я осуществляю загрузку файлов из формы на сервер:

var express = require("express");
    var router = express.Router();
    var multipart = require("connect-multiparty");
    var multipartMiddleware = multipart();
    var ResourcesController = require("src/resources/resourcesController");
    
    router.post("/saveResource", multipartMiddleware, function(req, res) {
    	var instance = new ResourcesController(res,req);
    	instance.saveResource();
    });
    
    module.exports = router;

Благодаря connect-multiparty, можно получить в req.files переданные файлы и дальше уже что-то с ними делать.

Но, я хочу показывать пользователю прогресс загрузки файлов на сервер, для этого я буду использовать сокеты. Например, когда срабатывает router.post("/saveResource" ... сервер эмитит событие с инфой, клиент соответственно ее красиво рисует. Вот на этом шаге я и споткнулся, т.к. то что попадает в req.files - это уже загружено во временную папку на сервере, а мне нужно как-то перехватить эти файлы на этапе загрузки на сервер, сделать ReadStream и в .on('data') посредством сокета эмитить событие с инфой клиенту. Как это сделать, пока не разобрался, может есть что-то типа connect-multiparty но с возможностью выводить прогресс в stream или какой либо другой способ?

Answer 1

[Александр Вульф]

Попробуйте заюзать более низкоуровневую библиотеку, на которой базируется connect-multiparty. Там как-раз есть progress :)

https://github.com/andrewrk/node-multiparty

var form = new multiparty.Form();
form.on('progress', function(bytesReceived, bytesExpected) {
   socket.emit('received', (bytesReceived / bytesExpected).toFixed(2) * 100);
});

Comments

[Al]

Спасибо. Это то что мне нужно) Немного не понял, как это встроить внутрь моего:
router.post("/saveResource"....
Поможете разобраться?

[Александр Вульф]

Alexander K.: как-то так https://gist.github.com/JWo1F/b1170bfe741d1cd9393f...

[Al]

Александр Вульф: исходя из вашего примера, получается что multipart.js будет универсален для всех роутов, он грузит файлы во временную папку? в onProgress(rec, exp) можно запилить один и тот же скрипт, который будет оперировать сокетами? и так же, в req.files все остается как было, и операции после загрузки файлов во временную папку не нужно адаптировать под уже данный способ загрузки с помощью node-multiparty?

[Александр Вульф]

Alexander K.: multipart.js - это ничто иное, как просто копия connect-multipart, но с одной измененной строчкой. А значит, работать будет также.
onProgress просто каждый раз дергается при поступлении данных. Делайте там что хотите :)

[Al]

Александр Вульф: спасибо вам, все сделал как хотел)

[Al]

Александр Вульф: еще хотел поинтересоваться, как сделать чтобы в onProgress попал request?
вернее не в сам onprogress, а сюда:

var multipartMiddleware = multipart({	
	//тут я хочу инициализировать socket
	onProgress(rec, exp) {
		socket.emit('received', (bytesReceived / bytesExpected).toFixed(2) * 100);
		console.log(rec, exp);
	}
});

Ведь мне нужны данные запроса, чтобы сокет мог отправить событие нужному юзеру...

[Al]

Александр Вульф: т.е. в моем случае, чтобы можно было использовать сокет, нужно иметь доступ к реквесту:
req.app.get('io')
т.к. при старте приложения сокет подключается так:

var server = http.createServer(app);
  //more actions ....
  var io = require('app/socket/server')(server);
  app.set('io', io);

[Александр Вульф]

Alexander K.: там надо чуть поправить multipart.js, вот: https://gist.github.com/JWo1F/b1170bfe741d1cd9393f...

[Александр Вульф]

Alexander K.: теперь будет onProgress(received, expected, req, res)

[Al]

Александр Вульф: большое спасибо, я разобрался. Пытался получить имя текущего файла который загружается, добавил в form.on('file'...:

if(options.onFile){
                options.onFile(name, val);
            }

Но потом понял что все файлы он получает как единое целое и решил сделать пост-обработку.

Answer 2

[Vitaly Sivkov]

Около года назад выполнял подобную задачу, правда Node была версии 0.12.
Использовал socket-io.stream и progress-stream, работало прекрасно. Правда у меня стояла задача потоковой передачи файла из браузера одного пользователя, в браузер другого с индикацией прогресса на обеих сторонах. Но думаю вам тоже должно подойти.

Comments

[Николай]

<Правда у меня стояла задача потоковой передачи файла из браузера одного пользователя, в браузер другого с индикацией прогресса на обеих сторонах>
Для этих целей нужно было использовать webrtc

[Vitaly Sivkov]

ACCNCC: На тот момент было решено делать на socket.io, т.к. веб-сокеты поддерживались практически везде, в отличие от WebRTC. Не знаю как с этим сейчас, давно не работал плотно с фронтэндом.

[jenya7771]

Vitaly Sivkov, У вас после загрузки файлы битыми не были? Как от этого можно избавиться, если загружать файлы через socket-io.stream?

Answer 3

[Евгений]

Почему не сделать это через nginx?