Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.');
});
like image 827
TIMEX Avatar asked Oct 19 '15 08:10

TIMEX


1 Answers

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).

like image 191
Aishwat Singh Avatar answered Nov 17 '22 23:11

Aishwat Singh