Creating fields in CRUD model MEAN.js

Question

I'm starting with MEAN.js framework and I´m trying to create my first app. I'm creating the App from a CRUD module generated with Yeoman (yo meanjs:crud-module).

The app is a simple form with 2 fields. "name" and "image". Name is the title of the image, and image the URL of image.

My problem now is that I can´t insert in the Mongo collection "photos" both fields from the form. Only the field "name" generated by default with the CRUD module generator is inserted correctly in the collection. What am I doing wrong?

photo.server.model.js

'use strict';

/**
 * Module dependencies.
 */
var mongoose = require('mongoose'),
  Schema = mongoose.Schema;

/**
 * Photo Schema
 */
var PhotoSchema = new Schema({
  name: {
    type: String,
    default: '',
    required: 'Introduce el nombre de la imagen',
    trim: true
  },
  image: {
    type: String,
    default: '',
    required: 'Introduce la url de la imagen',
    trim: true
  },
  created: {
    type: Date,
    default: Date.now
  },
  user: {
    type: Schema.ObjectId,
    ref: 'User'
  }
});

mongoose.model('Photo', PhotoSchema);

photo.server.controller.js

'use strict';

/**
 * Module dependencies.
 */
var path = require('path'),
  mongoose = require('mongoose'),
  Photo = mongoose.model('Photo'),
  errorHandler = require(path.resolve('./modules/core/server/controllers/errors.server.controller')),
  _ = require('lodash');

/**
 * Create a Photo
 */
exports.create = function(req, res) {
  var photo = new Photo(req.body);
  photo.user = req.user;
  photo.save(function(err) {
    if (err) {
      return res.status(400).send({
        message: errorHandler.getErrorMessage(err)
      });
    } else {

      res.jsonp(photo);
    }
  });
};

/**
 * Show the current Photo
 */
exports.read = function(req, res) {
  // convert mongoose document to JSON
  var photo = req.photo ? req.photo.toJSON() : {};

  // Add a custom field to the Article, for determining if the current User is the "owner".
  // NOTE: This field is NOT persisted to the database, since it doesn't exist in the Article model.
  photo.isCurrentUserOwner = req.user && photo.user && photo.user._id.toString() === req.user._id.toString();

  res.jsonp(photo);
};

/**
 * Update a Photo
 */
exports.update = function(req, res) {
  var photo = req.photo;

  photo = _.extend(photo, req.body);

  photo.save(function(err) {
    if (err) {
      return res.status(400).send({
        message: errorHandler.getErrorMessage(err)
      });
    } else {
      res.jsonp(photo);
    }
  });
};

/**
 * Delete an Photo
 */
exports.delete = function(req, res) {
  var photo = req.photo;

  photo.remove(function(err) {
    if (err) {
      return res.status(400).send({
        message: errorHandler.getErrorMessage(err)
      });
    } else {
      res.jsonp(photo);
    }
  });
};

/**
 * List of Photos
 */
exports.list = function(req, res) {
  Photo.find().sort('-created').populate('user', 'displayName').exec(function(err, photos) {
    if (err) {
      return res.status(400).send({
        message: errorHandler.getErrorMessage(err)
      });
    } else {
      res.jsonp(photos);
    }
  });
};

/**
 * Photo middleware
 */
exports.photoByID = function(req, res, next, id) {

  if (!mongoose.Types.ObjectId.isValid(id)) {
    return res.status(400).send({
      message: 'Photo is invalid'
    });
  }

  Photo.findById(id).populate('user', 'displayName').exec(function (err, photo) {
    if (err) {
      return next(err);
    } else if (!photo) {
      return res.status(404).send({
        message: 'No Photo with that identifier has been found'
      });
    }
    req.photo = photo;
    next();
  });
};

photo.client.controller.js

(function () {
  'use strict';

  // Photos controller
  angular
    .module('photos')
    .controller('PhotosController', PhotosController);

  PhotosController.$inject = ['$scope', '$state', '$window', 'Authentication', 'photoResolve'];

  function PhotosController ($scope, $state, $window, Authentication, photo) {

    var vm = this;

    vm.authentication = Authentication;
    vm.photo = photo;
    vm.error = null;
    vm.form = {};
    vm.remove = remove;
    vm.save = save;

    // Remove existing Photo
    function remove() {
      if ($window.confirm('Are you sure you want to delete?')) {
        vm.photo.$remove($state.go('photos.list'));
      }
    }

    // Save Photo
    function save(isValid) {
      if (!isValid) {
        $scope.$broadcast('show-errors-check-validity', 'vm.form.photoForm');
        return false;
      }
      // TODO: move create/update logic to service
      if (vm.photo._id) {
        vm.photo.$update(successCallback, errorCallback);
      } else {
        vm.photo.$save(successCallback, errorCallback);
        //console.log(vm.photo.image);
      }

      function successCallback(res) {
        $state.go('photos.view', {
          photoId: res._id
        });
      }

      function errorCallback(res) {
        vm.error = res.data.message;
      }
    }
  }
}());

form-photo.client.view.html

<section>
  <div class="page-header">
    <h1>{{vm.photo._id ? 'Edit Photo' : 'Nueva imagen'}}</h1>
  </div>
  <div class="col-md-12">
    <form name="vm.form.photoForm" class="form-horizontal" ng-submit="vm.save(vm.form.photoForm.$valid)" novalidate>
      <fieldset>
        <div class="form-group" show-errors>
          <label class="control-label" for="name">Nombre</label>
          <input name="name" type="text" ng-model="vm.photo.name" id="name" class="form-control" placeholder="Name" required>
          <div ng-messages="vm.form.photoForm.name.$error" role="alert">
            <p class="help-block error-text" ng-message="required">El nombre de la foto es requerido</p>
          </div>
        </div>
         <div class="form-group" show-errors>
          <label class="control-label" for="image">URL</label>
          <input name="image" type="text" ng-model="vm.photo.image" id="image" class="form-control" placeholder="Url" required>
          <div ng-messages="vm.form.photoForm.image.$error" role="alert">
            <p class="help-block error-text" ng-message="required">La URL de la foto es requerido</p>
         </div>
        </div>
        <div class="form-group">
          <button type="submit" class="btn btn-default">{{vm.photo._id ? 'Update' : 'Crear'}}</button>
        </div>
        <div ng-show="vm.error" class="text-danger">
          <strong ng-bind="vm.error"></strong>
        </div>
      </fieldset>
    </form>
  </div>
</section>

Answer 1

Use this link and see example, since

mean 'js'

uses

multer

to upload in 0.4.2 is already integrated so if you want u can also generate and copy from there and edit little bit since they are not compatible