How do I use Plupload with Node.js and show the percentages of upload?

Question

Currently, my code works. However, when a file is uploaded, no percentages are sent back to the javascript code. (I guess my server needs to send the chunk percentage back?)

The "UploadProgress" event just prints "0" when it's complete.

<script>
    $(function(){
        $("#button_holder").show();
        var uploader = new plupload.Uploader({
            runtimes : 'html5,flash,silverlight,html4',
            browse_button : 'pickfiles',
            container : 'button_holder',
            multi_selection: true,
            url : '/upload',
            flash_swf_url : '/js/plupload/js/Moxie.swf',
            silverlight_xap_url : '/js/plupload/js/Moxie.xap',
        });

        uploader.bind('FilesAdded', function(up, files) {
            $("#button_holder").hide(); 

            plupload.each(files, function(file) {
                var item = '<div class="upload_item" id="' + file.id + '">' + '<b class="percent"></b></div>' + file.name + ', ' + plupload.formatSize(file.size) + '</div>'
                $("#progress_holder").append(item);
            }); 

            uploader.start();
            return false;
        });

        uploader.bind('FileUploaded', function(uploader, file, response){
            if(response.status == 200){ 
                var icon = "<i class='fa fa-check fa-fw'></i>";
            }else{
                var icon = "<i class='fa fa-times fa-fw'></i>";
            }
            var html = '<div class="success_item">' + icon + ' ' + file.name + '</div>';
            $("#progress_holder").append(html);
        });

        uploader.bind('UploadComplete', function(uploader, files){
        });

        uploader.bind('UploadProgress', function(up, file) {
            console.log(file.percent); //just says "0"
            $("#" + file.id).first(".percent").html(file.percent + "%");
            return false;
        });
        uploader.init();
    });
</script>

This is my backend code:

var express = require('express');
var Pluploader = require('node-pluploader');
var ejs = require('ejs');
var bodyParser = require('body-parser')
var request = require('request');
var http = require('http');


var app = express();
app.set('views','/home/user/heaven/templates');
app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({ extended: true}));
app.use(bodyParser.json());
app.use(express.static('/home/user/heaven/media'));



var pluploader = new Pluploader({
  uploadLimit: 100, //MB
  uploadDir: '/home/user/heaven/uploads'
});

pluploader.on('fileUploaded', function(file, req) {
  console.log(file);
});
pluploader.on('error', function(error) {
    throw error;
});

app.post('/upload', function(req, res){
    pluploader.handleRequest(req, res);
});

app.get('/', function (req, res) {
    res.render('index', {});
});

var server = app.listen(3000, function () {
    console.log('Listening to server.');
});

Have you tried setting a chunk_size in the Uploader options ? — ploutch, Oct 22 '15 at 09:47
tried ur code just now , with ui from `http://www.plupload.com/examples/core` it works fine, uploaded a 300mb file, it shows percentage incrementing, no issue , only difference was `var pluploader = new Pluploader({ uploadLimit: 500, //MB //uploadDir: '/uploads' });` — Aishwat Singh, Oct 22 '15 at 09:57
i meant i commented out upload directory ,also added cors headers like `//CORS middleware var allowCrossDomain = function(req, res, next) { res.header('Access-Control-Allow-Origin', '*'); next(); }` `html : http://pastie.org/10499488` vl try ur code too later — Aishwat Singh, Oct 22 '15 at 09:59
also in ur code i changed url to `url : 'http://127.0.0.1:3000/upload',` — Aishwat Singh, Oct 22 '15 at 10:08
I am getting separate requests for each and every chunk. Is that the way it works? if then, How to combine all the chunks to make a file out of it? @Aishwat Singh — Vishnu IT, Jul 25 '19 at 09:18
@VishnuIT sorry I haven't touched Node in long time, but any uploader will send back file in chunks and that gets combined as blob in your browser I guess, take a look at this maybe https://stackoverflow.com/questions/22015673/node-js-http-request-returns-2-chunks-data-bodies — Aishwat Singh, Jun 03 '20 at 09:26

score 7 · Accepted Answer · edited Oct 23 '15 at 13:40

Just change url to:

url : 'http://127.0.0.1:3000/upload'

and instead of binding UploadProgress later, do it in init, like this:

var uploader = new plupload.Uploader({
            runtimes: 'html5,flash,silverlight,html4',
            browse_button: 'pickfiles',
            container: 'button_holder',
            multi_selection: true,
            url: 'http://127.0.0.1:3000/upload',
            flash_swf_url: '/js/plupload/js/Moxie.swf',
            silverlight_xap_url: '/js/plupload/js/Moxie.xap',
            init: {
                UploadProgress: function(up, file) {
                    console.log('file%: '+file.percent);

                }
            }
        });

I tested, it works in your code. The same thing doesn't work with bind, which is quite weird. I'll figure it out later.

Server code: https://github.com/aishwat/plupload_server

Client code: https://github.com/aishwat/plupload_client/blob/master/examples/custom.html

And if you don't want to use Plupload, there's another way using XMLHttpRequest progress event, something like:

xhr.upload.addEventListener("progress", function (evt) {});

Here's the node.js code using this approach (written by Rohit Kumar).

sorry for all the hustle , in ur code at uploadProgress bind just remove `return false` and it vl work . `uploader.bind('UploadProgress', function(up, file) { console.log(file.percent); return false; <-- remove this });` I guess this one is pretty self explanatory to why it was giving 0 all the time — Aishwat Singh, Oct 25 '15 at 11:33

How do I use Plupload with Node.js and show the percentages of upload?

1 Answers1