I'm using mean.io stack + ng-file-upload

does anyone know why the events are not triggered ?

client

controller('ArticleParentCtrl', ['$scope', '$timeout', '$upload', function ($scope, $timeout, $upload) {

        $scope.article = {};

        function setPreview(fileReader, index) {
            fileReader.onload = function(e) {
                $timeout(function() {
                    $scope.dataUrls[index] = e.target.result;
                });
            };
        }

        $scope.fileReaderSupported = window.FileReader !== null;
        $scope.uploadRightAway = true;

        $scope.hasUploader = function(index) {
            return (typeof $scope.upload[index] !== 'undefined');
        };
        $scope.abort = function(index) {
            $scope.upload[index].abort();
            $scope.upload[index] = null;
        };

        $scope.onFileSelect = function($files) {
            $scope.selectedFiles = [];
            $scope.progress = [];
            if ($scope.upload && $scope.upload.length > 0) {
                for (var i = 0; i < $scope.upload.length; i++) {
                    if ($scope.upload[i] !== null) {
                        $scope.upload[i].abort();
                    }
                }
            }
            $scope.upload = [];
            $scope.uploadResult = [];
            $scope.selectedFiles = $files;
            $scope.dataUrls = [];
            for (var y = 0; y < $files.length; y++) {
                var $file = $files[y];
                var isImage = /\.(jpeg|jpg|gif|png)$/i.test($file.name);
                if(!isImage){
                    alert('Only images are allowed');
                    return;
                }
                if (window.FileReader && $file.type.indexOf('image') > -1) {
                    var fileReader = new FileReader();
                    fileReader.readAsDataURL($files[y]);
                    setPreview(fileReader, y);
                }
                $scope.progress[y] = -1;
                if ($scope.uploadRightAway) {
                    $scope.start(y);
                }
            }
        };

        $scope.start = function(index) {
            $scope.progress[index] = 0;
            $scope.upload[index] = $upload.upload({
                url :'/articles/api/upload',
                method: 'POST',
                headers: {
                    'x-ng-file-upload': 'lalista'
                },
                data :  $scope.media,
                file: $scope.selectedFiles[index],
                fileFormDataName: 'avatar'
            })
            .then(
                function(response) {
                    $scope.uploadResult.push(response.data);
                    $timeout(function() {
                        $scope.article.avatar =  response.data.avatar;
                    });
                },
                null,
                function(evt) {
                    $scope.progress[index] = parseInt(100.0 * evt.loaded / evt.total);
                })
            .xhr(function(xhr){
                xhr.upload.addEventListener('abort', function(){
                        console.log('aborted plete');
                    }, 
                    false);
            });
        };

    }])

server

exports.upload = function(req, res) {
    var busboy = new Busboy({ headers: req.headers });
    busboy.on('error', function(err){
        console.log(err);
    });
    busboy.on('file', function(fieldname, file, filename, encoding, mimetype) {
      console.log('fieldname');
      console.log(fieldname);
      console.log('file');
      console.log(file);
      console.log('filename');
      console.log(filename);
      console.log('encoding');
      console.log(encoding);
      console.log('mimetype');
      console.log(mimetype);
      //var saveTo = path.join(os.tmpDir(), path.basename(fieldname));
      //file.pipe(fs.createWriteStream(saveTo));
    });
    busboy.on('finish', function() {
      console.log('finish');
    });

};

if I use formidable like:

var form = new formidable.IningForm;
form.parse(req, function(err, fields, files){
    console.log(files);
});

the code works fine but I'd like to know whay on earth with busboy doesn't work :(

I'm using mean.io stack + ng-file-upload

does anyone know why the events are not triggered ?

client

controller('ArticleParentCtrl', ['$scope', '$timeout', '$upload', function ($scope, $timeout, $upload) {

        $scope.article = {};

        function setPreview(fileReader, index) {
            fileReader.onload = function(e) {
                $timeout(function() {
                    $scope.dataUrls[index] = e.target.result;
                });
            };
        }

        $scope.fileReaderSupported = window.FileReader !== null;
        $scope.uploadRightAway = true;

        $scope.hasUploader = function(index) {
            return (typeof $scope.upload[index] !== 'undefined');
        };
        $scope.abort = function(index) {
            $scope.upload[index].abort();
            $scope.upload[index] = null;
        };

        $scope.onFileSelect = function($files) {
            $scope.selectedFiles = [];
            $scope.progress = [];
            if ($scope.upload && $scope.upload.length > 0) {
                for (var i = 0; i < $scope.upload.length; i++) {
                    if ($scope.upload[i] !== null) {
                        $scope.upload[i].abort();
                    }
                }
            }
            $scope.upload = [];
            $scope.uploadResult = [];
            $scope.selectedFiles = $files;
            $scope.dataUrls = [];
            for (var y = 0; y < $files.length; y++) {
                var $file = $files[y];
                var isImage = /\.(jpeg|jpg|gif|png)$/i.test($file.name);
                if(!isImage){
                    alert('Only images are allowed');
                    return;
                }
                if (window.FileReader && $file.type.indexOf('image') > -1) {
                    var fileReader = new FileReader();
                    fileReader.readAsDataURL($files[y]);
                    setPreview(fileReader, y);
                }
                $scope.progress[y] = -1;
                if ($scope.uploadRightAway) {
                    $scope.start(y);
                }
            }
        };

        $scope.start = function(index) {
            $scope.progress[index] = 0;
            $scope.upload[index] = $upload.upload({
                url :'/articles/api/upload',
                method: 'POST',
                headers: {
                    'x-ng-file-upload': 'lalista'
                },
                data :  $scope.media,
                file: $scope.selectedFiles[index],
                fileFormDataName: 'avatar'
            })
            .then(
                function(response) {
                    $scope.uploadResult.push(response.data);
                    $timeout(function() {
                        $scope.article.avatar =  response.data.avatar;
                    });
                },
                null,
                function(evt) {
                    $scope.progress[index] = parseInt(100.0 * evt.loaded / evt.total);
                })
            .xhr(function(xhr){
                xhr.upload.addEventListener('abort', function(){
                        console.log('aborted plete');
                    }, 
                    false);
            });
        };

    }])

server

exports.upload = function(req, res) {
    var busboy = new Busboy({ headers: req.headers });
    busboy.on('error', function(err){
        console.log(err);
    });
    busboy.on('file', function(fieldname, file, filename, encoding, mimetype) {
      console.log('fieldname');
      console.log(fieldname);
      console.log('file');
      console.log(file);
      console.log('filename');
      console.log(filename);
      console.log('encoding');
      console.log(encoding);
      console.log('mimetype');
      console.log(mimetype);
      //var saveTo = path.join(os.tmpDir(), path.basename(fieldname));
      //file.pipe(fs.createWriteStream(saveTo));
    });
    busboy.on('finish', function() {
      console.log('finish');
    });

};

if I use formidable like:

var form = new formidable.IningForm;
form.parse(req, function(err, fields, files){
    console.log(files);
});

the code works fine but I'd like to know whay on earth with busboy doesn't work :(

• javascript
• node.js
• angularjs
• express

2 Answers 2

You're not piping your request into busboy. You need to do req.pipe(busboy);.

This works for me

busboy not firing finish event

var Busboy = require('busboy');

exports.upload = function(req, res) {
    var busboy = new Busboy({
        headers: req.headers
    });

    busboy.on('error', function(err) {
        console.log(err);
    });

    busboy.on('file', function(fieldname, file, filename, encoding, mimetype) {
        console.log(fieldname);
        console.log(file);
        console.log(filename);
        console.log(encoding);
        console.log(mimetype);

        // see other question
        file.resume();

    });

    busboy.on('finish', function() {
        console.log('finish');
    });

    return req.pipe(busboy);

};