Meanjs unable to save image into nested schema

Question

my Meanjs app is supposed to upload a logo into a nested schema, within my UserSchema. I am able to successfully upload the file, as I am able to store a profile photo for the user successfully. But when I am trying to save an image into the nested Schema, it fails.

My model looks something like this:

ClubSchema = {name:String,
              logo:Buffer};

UserSchema = {name:String,
              photo:Buffer,
              club:[ClubSchema]
             }

I am able to successfully insert all the data into my ClubSchema, but not the logo.

My client.controller.js

    var user = new Users($scope.user);
    console.dir(user.club);      //I can see the logo here
    for(var i = 0;i<user.club.length;i++){
        user.club[i].logo = $scope.uploadedLogos[i];  //Still trying to force it into the object

        user.club[i].hasLogo = true;    //Mysterious hasLogo = false appears
    }
    user.$update(function(response) {
        $scope.success = true;
        console.log('Inside scope success User is ');
        console.dir(user);               //hasLogo=false appears in this and no logo
        $location.path('/');
        }, function(response) {
             $scope.error = response.data.message;
        });

My server.controller.js

if (user) {
    // Merge existing user
    user = _.extend(user, req.body);
    user.updated = Date.now();
    user.displayName = user.name;

    user.save(function(err) {
        if (err) {
            return res.status(400).send({
                message: errorHandler.getErrorMessage(err)
            });
        } else {
            req.login(user, function(err) {
                if (err) {
                    res.status(400).send(err);
                } else {
                    res.json(user);
                }
            });
        }
    });
} else {
    res.status(400).send({
        message: 'User is not signed in'
    });
}

The hasLogo field is completely baffling because no such assignment exists in my code. I added the hasLogo = true, hoping that somehow it would set the hasLogo to true and upload the image then, but that doesn't work either. I have no idea where this hasLogo is coming from. After the hasLogo = true loop, if I print the object, I can see two hasLogo fields, one true and the other false. After the $update success, it is always false. My model does not contain a hasLogo field.

Answer 1

This is the way i used MEAN.JS for file upload.

Model

  var UserSchema = new mongoose.Schema({
  name:{type:String,required:true},
  photo:Buffer  // Image
  });

Server Controller

var userPicture = function(req,res){             // Stores Picture for a user matching the ID.
    user.findById(req.param('id'), function (err, user) {
        console.log(req.files) // File from Client
        if(req.files.file){   // If the Image exists
            var fs = require('node-fs');
            fs.readFile(req.files.file.path, function (dataErr, data) {
                if(data) {
                    user.photo ='';
                    user.photo = data;  // Assigns the image to the path.
                    user.save(function (saveerr, saveuser) {
                        if (saveerr) {
                            throw saveerr;
                        }
                        res.json(HttpStatus.OK, saveuser);                        
                    });
                }
            });
            return
        }
        res.json(HttpStatus.BAD_REQUEST,{error:"Error in file upload"});
    });
};

Client Controller

    $scope.saveuserImage =  function(){
        $scope.upload = $upload.upload({  // Using $upload
            url: '/user/'+$stateParams.id+'/userImage',  // Direct Server Call.
            method:'put',
            data:'',  // Where the image is going to be set.
            file: $scope.file
        }).progress(function (evt) {})
            .success(function () {
                var logo = new FileReader();  // FileReader.

                $scope.onAttachmentSelect = function(file){
                    logo.onload = function (e) {
                        $scope.image = e.target.result;  // Assigns the image on the $scope variable.
                        $scope.logoName = file[0].name; // Assigns the file name.
                        $scope.$apply();
                    };
                    logo.readAsDataURL(file[0]);
                    $scope.file = file[0];
                    $scope.getFileData = file[0].name
                };
                location.reload();
                $scope.file = "";
                $scope.hideUpload = 'true'
            });
        $scope.getFileData = '';
     //        location.reload()
    };

Html

<input ng-file-select="onAttachmentSelect($files)" ng-model="getFileData" name="upload" type="file" required="true">

The ng-file-select is used to get the file from the client.

This works fine for me. Hope this helps.