MEAN Stack: How to bind uploads to a mongoose model? - angularjs

Question

I´m playing around with upload forms in my MEAN Application (its a project control panel). I used this tutorial for implementing a working upload: http://markdawson.tumblr.com/post/18359176420/asynchronous-file-uploading-using-express-and
With this I can upload files - they appear in my upload folder.
Now I want to achieve, that the upload is linked to the project the user made. E.g.: Jon Doe is logged in, he uploads a picture. Now I want to render his profile page. I query my project model for Jon Doe --> now I want to media files uploaded by him.
So how do I post my media, to the projectSchema of Jon Doe? Afterwards, whats the best way to display all the media in Angular?
------Edit------
I´ve been trying aroud with the extension multer, and I nearly managed to make GET and POST of uploads working. Problem is, I cant fetch any data from the database. My Console gives me a GET /uploads/media/[object%20Object] 304.
The target is: Writing the project_id, with the files to the mediaSchema. So when I´m opening a project, I get all media matching the project_id of this Project. I updated my code for you:
HTML Form
<form id="uploadForm"
enctype="multipart/form-data"
action="/uploads/"
method="post">
<label for="project_id">Ihre Projekt ID</label>
<input type="text" name="project_id" value="{{projects._id}}" readonly>
<input type="file" name="userPhoto"/>
<button type="submit">Hochladen</button>
</form>
<hr>
<img ng-src="{{media.img}}"/>
Angular Controller
var app = angular.module('myApp', []);
var projectId =
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;
var projectId = $scope.projects._id;
});
//GET Media
$http.get('/uploads/media/'+projectId).then(function(data){
console.log('Medien-Daten erhalten');
$scope.media = data;
});
});
Routing:
//FILE HANDLING FOR PROJECTMEDIA
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);
});
});
mediaSchema
var mongoose = require ('mongoose');
var mediaSchema = mongoose.Schema({
img : {data: Buffer, contentType: String},
project_id : String,
updated_at : {type: Date, default: Date.now }
});
projectSchema
var projectSchema = mongoose.Schema({
author : String,
name : String,
description : String,
tags : String,
updated_at : {type: Date, default: Date.now },
active : {type: Boolean, default: false}
});

Answer 1

To answer your questions.
how do I post my media, to the projectSchema of Jon Doe?
In Angular you want to use the $http service. It's very simple, an example for you would be.
HTML
<input id="filebutton" name="filebutton" file-model="myFile" class="input-file" type="file">
<br>
<button ng-click="postForm()" id="singlebutton" name="singlebutton" class="btn btn-primary">Upload</button>
APP
var app = angular.module('jsbin', []);
//we need to use this directive to update the scope when the input file element is changed.
app.directive('fileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
element.bind('change', function(){
scope.$apply(function(){
modelSetter(scope, element[0].files[0]);
});
});
}
};
}]);
//use a service to handle the FormData upload.
app.service('fileUpload', ['$http', function ($http) {
this.uploadFileToUrl = function(file, uploadUrl){
var fd = new FormData();
fd.append('userPhoto', file);
$http.post(uploadUrl, fd, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
})
.success(function(){
//all done!
})
.error(function(){
});
};
}]);
app.controller('DemoCtrl', function($scope, $http, fileUpload) {
$scope.postForm = function(){
console.log($scope.myFile);
// Run our multiparty function.
fileUpload.uploadFileToUrl($scope.myFile, '/upload/');
};
});
Afterwards, whats the best way to display all the media in Angular?
Assuming you have your endpoint working correctly. You can do a $http only this time do a get.
JS
// make the request
$http.get('/your/media').then(function(response){
//add to scope
$scope.myMedia = response.data;
});
HTML
<div ng-repeat="photo in myMedia">{{photo}}</div>