MEAN-Stack-file-Upload/server.

js

const express =
require('express');
const path = require('path');
const bodyParser = require('body-parser');
const cors = require('cors');
const mongoose = require('mongoose');

const dbConfig = require('./config/db');

const sectionRoutes = require('./routes/section-routes');

const mediaRoutes = require('./routes/media-routes');

const app = express();

const port = 4000;

app.listen(port, () => {
console.log('Server Stater at: ' + port);
});

mongoose.connect(dbConfig.database);
mongoose.connection
.on('connected', () => {
console.log('Connected to database ' + dbConfig.database);
})
.on('error', (err) => {
console.log('Error: ' + err);
});

app.use(bodyParser.json());
app.use(cors());

app.use('/v1/sections', sectionRoutes);
app.use('/v1/media', mediaRoutes);
 // Set public folder
app.use(express.static(path.join(__dirname, 'ng-src/dist')));

// Every other request will load app

app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'ng-src/dist/index.html'));
});

MEAN-Stack-file-Upload/config/db.js

module.exports
= {
database: 'mongodb://localhost:27017/mb'
};

MEAN-Stack-file-Upload/routes/media-routes.js

const express =
require('express');
const routerMedia = express.Router();
const multer = require('multer');
const fs = require('fs');
const Media = require('../models/media');

// configuring File Upload

const storage = multer.diskStorage({
// set uploads folder
destination: (req, file, cb) => {
cb(null, 'ng-src/src/assets/uploads');
},
// set default filename
filename: (req, file, cb) => {
cb(null, file.originalname); // overwrites current file with
same name!!!
 }
});

const upload = multer({ storage: storage })

// Get All Media Files

routerMedia.get('/', (req, res, next) => {
Media.find({}, (err, items) => {
if (err) {
console.log(err);
res.json({ err: err });
} else {
res.json({ medias: items });
}
});
});

// Get Single Media File

routerMedia.get('/:id', (req, res, next) => {
const mediaId = req.params.id;
Media.findOne({ _id: mediaId }, (err, item) => {
if (err) {
console.log(err);
res.json({ err: err });
} else {
res.json({ media: item });
}
});
});

// Add New Media File

routerMedia.post('/upload', upload.single('file'), (req, res, next)
=> {
console.log('post file with content:');
console.log(req.file);
// Initializing Media Info
let newFile = new Media({
filePath: 'assets\/uploads\/' + req.file.filename,
fileName: req.file.filename,
 imageTitle: req.file.filename,
imageAlt: req.file.filename,
fileType: req.file.mimetype,
fileSize: req.file.size,
// imageDimension: fileDimension,
fileUploadDate: Date.now()
});
// Add File to DB
Media.addNewFile(newFile, (err, result) => {
if (err) {
res.status(500).json({ success: false, msg: 'Image Not
added to DB. Error: ' + err });
} else {
res.status(200).json({ success: true, msg: 'Image Added
to DB! ' + result });
}
});
});

// Update Media File

routerMedia.put('/:id', (req, res, next) => {
const mediaId = req.params.id;
const mediaObj = req.body;
Media.findByIdAndUpdate({ _id: mediaId }, mediaObj, (err, result)
=> {
if (err) {
res.status(500).json({ success: false, msg: 'Media Not
Updated. Error: ' + err });
} else if (!result) {
res.status(500).json({ success: false, msg: 'Media With
Specified ID Not Found.' }); // ???
} else {
result.save((err, result) => {
if (err) {
return res.status(500).json({
success: false, msg: 'An Error Occurred!' +
err
});
}
res.status(200).json({ success: true, msg: 'Media
Updated. ' + result });
});
 }
});
});

// Delete Media File

routerMedia.delete('/:id', (req, res, next) => {
const fileId = req.params.id;
const filePath = req.headers.accept;
Media.remove({ _id: fileId }, (err, item) => {
if (err) {
console.log(err);
res.status(500).json({ success: false, msg: 'File Not
Removed From Database. Error: ' + err });
} else {
fs.unlink('ng-src\/src\/' + filePath, () => {
res.status(200).json({ success: true, msg: 'File
Removed From Database. ' + item });
});
}
});
});

module.exports = routerMedia;

MEAN-Stack-file-Upload/routes/section-routes.js

const express =
require('express');
const routerSections = express.Router();

const Section = require('../models/section');

// Get Sections
routerSections.get('/', (req, res, next) => {
Section.find({}, function (err, items) {
if (err) {
 console.log(err);
res.json({ err: err });
} else {
res.json({ sections: items });
}
});
});

// Get Single Section

routerSections.get('/section/:id', (req, res, next) => {
const sectionId = req.params.id;
Section.findOne({ _id: sectionId }, (err, item) => {
if (err) {
console.log(err);
res.json({ err: err });
} else {
res.json({ section: item });
}
});
});

// Update Section
routerSections.put('/section/:id', (req, res, next) => {
const sectionId = req.params.id;
const sectionObj = req.body;
Section.findByIdAndUpdate({ _id: sectionId }, sectionObj, (err,
result) => {
if (err) {
res.status(500).json({ success: false, msg: 'Section Not
Updated. Error: ' + err });
} else if (!result) {
res.status(500).json({ success: false, msg: 'Section With
Specified ID Not Found.' }); // ???
} else {
result.save((err, result) => {
if (err) {
res.status(500).json({ success: false, msg: 'An
Error Occurred!' + err });
} else {
res.status(200).json({ success: true, msg:
'Secion Updated. ' + result });
 }
});
}
});
});

module.exports = routerSections;

MEAN-Stack-file-Upload/models/media.js

const mongoose =
require('mongoose');

const MediaSchema = mongoose.Schema({

filePath: {
type: String,
required: true,
trim: true
},
fileName: String,
imageTitle: {
type: String,
default: ''
},
imageAlt: {
type: String,
default: ''
},
fileType: String,
fileSize: String,
// imageDimension: String,
fileUploadDate: Date
});

const Media = module.exports = mongoose.model('uploads',

MediaSchema);
 module.exports.addNewFile = (newFile, callback) => {
newFile.save(callback);
}

MEAN-Stack-file-Upload/models/section.js

const mongoose =
require('mongoose');

const SectionSchema = mongoose.Schema({

secTitle: String,
secContent: String,
secImage: String
});

const Section = module.exports = mongoose.model('section',

SectionSchema);

Frontend

MEAN-Stack-file-Upload/ng-src/src/app/app.module.ts

import {
BrowserModule }
from
'@angular/platform-
browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppRoutingModule } from './app-routing.module';
import { AdminService } from './admin/admin.service';
import { AppComponent } from './app.component';
import { HomeComponent } from './components/home/home.component';
 @NgModule({
declarations: [
AppComponent,
HomeComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
AppRoutingModule
],
providers: [AdminService],
bootstrap: [AppComponent]
})
export class AppModule { }

MEAN-Stack-file-Upload/ng-src/src/app/app-routing.module.ts

import {
NgModule } from
'@angular/core';
import { RouterModule, Routes } from '@angular/router';
// Components
import { AppComponent } from './app.component';
import { HomeComponent } from './components/home/home.component';

const appRoutes: Routes = [

{ path: '', component: HomeComponent },
{ path: 'admin', loadChildren: 'app/admin/admin.module#AdminModule' }
]

@NgModule({
imports: [
RouterModule.forRoot(appRoutes)
],
exports: [RouterModule]
})
 export class AppRoutingModule {}

MEAN-Stack-file-Upload/ng-src/src/app/components/home/home.component.ts/

import {
Component,
OnInit } from
'@angular/core';
import { AdminService } from '../../admin/admin.service';

@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

sections: any[];

constructor(private adminService: AdminService) { }

ngOnInit() {
this.adminService.getAllSections().subscribe(data => {
this.sections = data.sections
});
}

}
MEAN-Stack-file-Upload/ng-src/src/app/components/home/home.component.html

<header>

<button [routerLink]="['/admin']" class="admin-link">Admin Area ></button>

</header>

<div *ngIf="sections" id="sections">

<div *ngFor="let sec of sections" class="section">

<div class="thumbnail">

<img [src]="sec.secImage" alt="" title="">

</div>

<h1>{{ sec.secTitle }}</h1>

<div>{{ sec.secContent }}</div>

</div>

</div>

MEAN-Stack-file-Upload/ng-src/src/app/components/home/home.component.css

#sections{
max-width: 1200px;
margin: auto;
}
.section {
border: 1px solid #ddd;
clear: both;
overflow: auto;
margin: 1rem 0;
}
.thumbnail {
float: left;
margin-right: 2em;
}
.thumbnail img {
max-width: 180px;
}