CODEWITHSUNDEEP
angularjsnode.jsmongodbmulter
David Nnamremmiz
David Nnamremmiz

Reputation: 201

POST and GET images to/out of MongoDB in Angular

I´m making an angular application, which gives users the possibilities, to manage their projects. I´ve got nodeJS & express serveside and MongoDB as my database.

I want to achieve, that a user can upload media(images under 16MB, so no need to use GridFS) to their projects and that you can display which project, has which media attached.

I´m not getting the images, nor an error. How can I pass the project_Id from angular, to my route, to find the media attached to the project? Is this way of trying to POST and GET the media the right way?

The model for projects and for media:

var mediaSchema = mongoose.Schema({
        media       : {data: Buffer, contentType: String},
        project_id  : String,
        updated_at  : {type: Date, default: Date.now }
});

var projectSchema = mongoose.Schema({
        author      : String,
        name        : String,
        description : String,
        tags        : String,
        updated_at  : {type: Date, default: Date.now },
        active      : {type: Boolean, default: false}
});

The routing

var Media = require('./models/media.js'); 
//GET all the media
app.get('/uploads/', function(req, res, next){
    Media.find(function (err, media){
        if (err) return next (err);
        res.json(media);
    });
});
//GET one item
app.get('/uploads/media/:projectId', function(req, res, next){
    Media.findOne(req.params , function (err, media){
        if (err) return next (err);
        res.json(media);
    });
});

Managing the uploads

app.use(multer({ dest: './uploads/',
 rename: function (fieldname, filename) {
    return filename+Date.now();
  },
onFileUploadStart: function (file) {
  console.log(file.originalname + ' is starting ...')
},
onFileUploadComplete: function (file) {
  console.log(file.fieldname + ' uploaded to  ' + file.path)
  done=true;
}
}));    

var Media = require('./app/models/media.js'); 
//POST media to the upload directory
app.post('/uploads/', function(req, res){
   if(done==true){
    Media.create(req.body, function(err, post){            
        console.log(req.files);
        res.end('File uploaded');          
    });
   }
});

Angular Controller

    var app = angular.module('myApp', []);

    app.controller('projectCtrl', function($scope, $http) {
        $scope.myVar = false;
        $scope.toggle = function() {
            $scope.myVar = !$scope.myVar
        };
        $http.get('/profile/project/').then(function (res){
            $scope.projects = res.data;
        });


        //GET Media
        var projectId = {{projects._id}};
        $http.get('/uploads/media' + projectId).succes(function(data){
            console.log('Medien-Daten erhalten');
            $scope.media = data;
        });
    });

Kind regards from Germany, David

Update (new Errors)

Trying to implement a solution, I get problems with my scopes. When I´m adding the $http.get for the media, my other scope seem to fetch no data... they are shown like this:scope doesnt work

Update 2(scope error fixed)

Fixed the error in the controller. I hadn´t defined a var for projectId, that caused the error. Managed to make the GET request work, and my application is looking for entries in the database. But i can´t manage to see any..

Upvotes: 1

Views: 2635

Answers (1)

Ed Knowles
Ed Knowles

Reputation: 1925

Your use of .find is incorrect in the get all function.

See http://mongoosejs.com/docs/api.html#query_Query-find

Media.find({}, function (err, media){
    if (err) return next (err);
    res.json(media);
});

This will return all documents.

Upvotes: 1

Related Questions