Upload image with article

[michalmw]

Hello,

i want to do upload image with save article. I try find somethink in google about 'upload image in angular' but, all script have url adres, fields and speciall callback().

Mayby you know - How do easy upload image in meanjs? I'm learning angular / mean and hard script isn't for me. Someone can help?

[lirantal]

Sounds like a good candidate for a PR. You can see an example of a file upload by checking how the profile user image was built. On Aug 15, 2015 5:14 PM, "michalmw" notifications@github.com wrote:

Hello,

i want to do upload image with save article. I try find somethink in google about 'upload image in angular' but, all script have url adres, fields and speciall callback().

Mayby you know - How do easy upload image in meanjs? I'm learning angular / mean and hard script isn't for me. Someone can help?

— Reply to this email directly or view it on GitHub https://github.com/meanjs/mean/issues/808.

[michalmw]

Hmm.. where is this example file? When i build app with yeoman i don't have example upload image in profile.

[lirantal]

The yeoman generator uses the previous 0.3.3 version,and today we already have 0.4 working in master branch. Clone it to experience the new version. On Aug 15, 2015 5:32 PM, "michalmw" notifications@github.com wrote:

Hmm.. where is this example file? When i build app with yeoman i don't have example upload image in profile.

— Reply to this email directly or view it on GitHub https://github.com/meanjs/mean/issues/808#issuecomment-131387751.

[michalmw]

Thx for help - Can i update app to 0.4? I have create models and vievs in 0.3.3 and if i clone new version i must create new. Mayby is special command to update?

[lirantal]

There's no easy way to update except to copy to files to their new locations in the 0.4 directories. On Aug 15, 2015 6:05 PM, "michalmw" notifications@github.com wrote:

Thx for help - Can i update app to 0.4? I have create models and vievs in 0.3.3 and if i clone new version i must create new. Mayby is special command to update?

— Reply to this email directly or view it on GitHub https://github.com/meanjs/mean/issues/808#issuecomment-131390765.

[michalmw]

Hello, im installed this. Profile have upload image and working ;D.

But is very hard to implemend in article. Maybe have you easy tutorial how to add to article or what i must copy to my controller?

[lirantal]

Sorry @michalmw I don't have anything out of the box except the code-base in your hand... that's the best documentation at this point.

[michalmw]

Ok, then last question.

In version 0.4 can i fast create new modules? or i must copy folder? e.x. 0.3 have yo and nice generator. i 0.4 only copy folder or manualy create?

[lirantal]

@michalmw the generator only supports the previous 0.3.3 version for now. There's no 0.4 version for it so yeah, there's no automated way of generating module skeletons.

[michalmw]

Thx.

When i copy folder my console error:

   modules/events/server/controllers/events.server.controller.js
      8 |  Event = mongoose.model('Event'),
           ^ Redefinition of 'Event'.

This file see like that:

'use strict';

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

/**
 * Create a article
 */
exports.create = function (req, res) {
  var event = new Event(req.body);
  event.user = req.user;

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

/**
 * Show the current article
 */
exports.read = function (req, res) {
  res.json(req.event);
};

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

  event.title = req.body.title;
  event.content = req.body.content;

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

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

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

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

/**
 * Article middleware
 */
exports.eventByID = function (req, res, next, id) {

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

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

Have you any idea?

[mleanos]

@michalmw Could it be possible that you're including this server controller elsewhere as well?

As for your question regarding a generator... You can use the yeoman vertical module generator. I'm using yo --version 1.4.7. After you verified that you have yeoman installed, you can execute the following command, and it will walk you through the steps to create the vertical module.

yo meanjs:vertical-module your-module-name

I'm not exactly sure how well the generator is lined up with our current best practices/code-style, however this should create the directory structure and the files that you need. Also, the tests might not be accurate either. Since yeoman doesn't support our newest master version, please use this with caution as it may differ from how our modules are implemented.

These may be help to you, in determining how to implement an image to an Article...

https://github.com/meanjs/mean/blob/master/modules/users/server/controllers/users/users.profile.server.controller.js#L54 You will need a server controller method like this in your articles module.

https://github.com/meanjs/mean/blob/master/modules/users/server/controllers/users/users.profile.server.controller.js#L59 You can change the path of the article image uploads to be './modules/articles/client/img/uploads/'

You will need a similar client controller for your articles as this... https://github.com/meanjs/mean/blob/master/modules/users/client/controllers/settings/change-profile-picture.client.controller.js#L10 You will change the url to include a path to your Articles REST endpoint... maybe api/articles/picture

I hope this helps. And if you get something working, don't hesitate to submit a PR; even if it's not complete/working. We are more than happy to give feedback during the process.

[michalmw]

@mleanos thx for you answer ;-). I try do this.

[michalmw]

@mleanos i try another modules in:

yo meanjs:vertical-module your-module-name

But yo install all application 0.3 (i have this same version yo).

Then i copy folder articles and paste in another name 'Wydarzenia'. I change all name in controller, config and all file. And i have only one error. When i go on /wydarzenia

i see page and console log show:

TypeError: Cannot read property 'query' of undefined
    at Scope.$scope.find (http://localhost:3000/modules/wydarzenia/client/controllers/wydarzenia.client.controller.js:58:37)
    at $parseFunctionCall (http://localhost:3000/lib/angular/angular.js:12456:18)
    at Scope.parent.$get.Scope.$eval (http://localhost:3000/lib/angular/angular.js:14555:28)
    at ngDirective.compile.pre (http://localhost:3000/lib/angular/angular.js:22594:15)
    at invokeLinkFn (http://localhost:3000/lib/angular/angular.js:8290:9)
    at nodeLinkFn (http://localhost:3000/lib/angular/angular.js:7779:11)
    at compositeLinkFn (http://localhost:3000/lib/angular/angular.js:7149:13)
    at publicLinkFn (http://localhost:3000/lib/angular/angular.js:7028:30)
    at $interpolate.compile (http://localhost:3000/lib/angular-ui-router/release/angular-ui-router.js:4026:9)
    at invokeLinkFn (http://localhost:3000/lib/angular/angular.js:8290:9) <section data-ng-controller="WydarzeniaController" data-ng-init="find()" class="ng-scope">

But when i go on /create

TypeError: Wydarzenia is not a function
    at Scope.$scope.create (http://localhost:3000/modules/wydarzenia/client/controllers/wydarzenia.client.controller.js:11:24)
    at $parseFunctionCall (http://localhost:3000/lib/angular/angular.js:12456:18)
    at ngEventDirectives.(anonymous function).$rootScope.compile.element.on.callback (http://localhost:3000/lib/angular/angular.js:21692:17)
    at Scope.parent.$get.Scope.$eval (http://localhost:3000/lib/angular/angular.js:14555:28)
    at Scope.parent.$get.Scope.$apply (http://localhost:3000/lib/angular/angular.js:14654:23)
    at HTMLFormElement.<anonymous> (http://localhost:3000/lib/angular/angular.js:21697:23)
    at HTMLFormElement.jQuery.event.dispatch (http://localhost:3000/lib/jquery/dist/jquery.js:4435:9)
    at HTMLFormElement.jQuery.event.add.elemData.handle (http://localhost:3000/lib/jquery/dist/jquery.js:4121:28)

I think somethink i do wrong. Mayby can you help me?

Thx my master ;-)

[mleanos]

@michalmw Did the yo generator install the vertical module correctly?

Can you share the wydarzenia controller code?

[michalmw]

Server -> wydarzenia.server.controller.js

'use strict';

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

/**
 * Create a article
 */
exports.create = function (req, res) {
  var wydarzenie = new Wydarzenie(req.body);
  wydarzenie.user = req.user;

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

/**
 * Show the current article
 */
exports.read = function (req, res) {
  res.json(req.wydarzenie);
};

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

  wydarzenie.title = req.body.title;
  wydarzenie.content = req.body.content;

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

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

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

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

/**
 * Article middleware
 */
exports.wydarzenieByID = function (req, res, next, id) {

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

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

Server=> model -> wydarzenie.server.model.js

'use strict';

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

/**
 * Article Schema
 */
var WydarzenieSchema = new Schema({
  created: {
    type: Date,
    default: Date.now
  },
  title: {
    type: String,
    default: '',
    trim: true,
    required: 'Title cannot be blank'
  },
  category: {
    type: String,
    default: '',
    trim: true
  },
  content: {
    type: String,
    default: '',
    trim: true
  },
  user: {
    type: Schema.ObjectId,
    ref: 'User'
  }
});

mongoose.model('Wydarzenie', WydarzenieSchema);

Client->controller -> wydarzenia.client.controller.js

'use strict';

// Articles controller
angular.module('wydarzenia').controller('WydarzeniaController', ['$scope', '$stateParams', '$location', 'Authentication', 'Wydarzenia',
  function ($scope, $timeout, $window, $stateParams, $location, Authentication, Wydarzenia) {
    $scope.authentication = Authentication;

    // Create new Article
    $scope.create = function () {
      // Create new Article object
      var wydarzenie = new Wydarzenia({
        title: this.title,
        content: this.content
      });

      // Redirect after save
      wydarzenie.$save(function (response) {
        $location.path('wydarzenia/' + response._id);

        // Clear form fields
        $scope.title = '';
        $scope.content = '';
      }, function (errorResponse) {
        $scope.error = errorResponse.data.message;
      });
    };

    // Remove existing Article
    $scope.remove = function (wydarzenie) {
      if (wydarzenie) {
        wydarzenie.$remove();

        for (var i in $scope.wydarzenia) {
          if ($scope.wydarzenia[i] === wydarzenie) {
            $scope.wydarzenia.splice(i, 1);
          }
        }
      } else {
        $scope.wydarzenie.$remove(function () {
          $location.path('wydarzenia');
        });
      }
    };

    // Update existing Article
    $scope.update = function () {
      var wydarzenie = $scope.wydarzenie;

      wydarzenie.$update(function () {
        $location.path('wydarzenia/' + wydarzenie._id);
      }, function (errorResponse) {
        $scope.error = errorResponse.data.message;
      });
    };

    // Find a list of Articles
    $scope.find = function () {
      $scope.wydarzenia = Wydarzenia.query();
    };

    // Find existing Article
    $scope.findOne = function () {
      $scope.wydarzenie = Wydarzenia.get({
        wydarzenieId: $stateParams.wydarzenieId
      });
    };
  }
]);

@mleanos thx for you time ;-)

[mleanos]

@michalmw What is Wydarzenia that's being injected into your controller? Looks like it's meant to be a service?

The errors indicate to me, that Wydarzenia isn't defined properly; thus, it's being injected as undefined.

[michalmw]

@mleanos Wydarzenia is to same as article but have another field. In english is 'event'.

In my app i want create article and event. And when i copy folder 'articles' and change name: Articles - Wydarzenia [is many] Article - Wydarzenie [is one]

and paste to folder /modules. For example in my menu i have 'wydarzenia' and when i click 'wydarzenia list' i have in my console.log... :

TypeError: Cannot read property 'query' of undefined
    at Scope.$scope.find (http://localhost:3000/modules/wydarzenia/client/controllers/wydarzenia.client.controller.js:58:37)
    at $parseFunctionCall (http://localhost:3000/lib/angular/angular.js:12456:18)
    at Scope.$eval (http://localhost:3000/lib/angular/angular.js:14555:28)
    at pre (http://localhost:3000/lib/angular/angular.js:22594:15)
    at invokeLinkFn (http://localhost:3000/lib/angular/angular.js:8290:9)
    at nodeLinkFn (http://localhost:3000/lib/angular/angular.js:7779:11)
    at compositeLinkFn (http://localhost:3000/lib/angular/angular.js:7149:13)
    at publicLinkFn (http://localhost:3000/lib/angular/angular.js:7028:30)
    at http://localhost:3000/lib/angular-ui-router/release/angular-ui-router.js:4026:9
    at invokeLinkFn (http://localhost:3000/lib/angular/angular.js:8290:9) <section data-ng-controller="WydarzeniaController" data-ng-init="find()" class="ng-scope">

and i hate this error ;/ Mayby i can send app to git and you see this? but this is only 1 folder in /modules - >wydarzenia and have this same as article but change name ;/

[codydaig]

@michalmw What does your wydarzenia.client.service.js Look like? From looking at the above code and the error message, it's failing inside the service.

[codydaig]

@michalmw Feel free to post the repo too so we can just look at everything instead of forgetting the exact list of files you need to post. :-D

[michalmw]

@codydaig or @mleanos my wydarzenia.client.service.js

'use strict';

//Articles service used for communicating with the articles REST endpoints
angular.module('wydarzenia').factory('Wydarzenia', ['$resource',
  function ($resource) {
    return $resource('api/wydarzenia/:wydarzenieId', {
      wydarzenieId: '@_id'
    }, {
      update: {
        method: 'PUT'
      }
    });
  }
]);

On git: https://github.com/michalmw/mean-mastera

[lirantal]

@codydaig is this relevant anymore?

[codydaig]

@michalmw I'm going to assume this can be closed. If this is still an issue, feel free to reopen. :-D