How to fix POST 404 error using node.js? - node.js

Question

I'm I'm stuck in post request while I'm developing upload images in quill editor.
I have no idea what I have to do to fix this issue.
When I try to send data using post request, then 404 error occur.
routes/img.js - UPDATED
var ImageFile = require('../models/imageFiles');
var multer = require('multer');
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'img/') // Set directory
},
filename: function (req, file, cb) {
cb(null, file.name) // Set file name
}
});
var img = multer({ storage: storage });
router.post('/upload', img.single('imgfile'), (req, res, next) => {
var imageFile = new ImageFile({
name: req.body.name,
type: req.body.type,
size: req.body.size,
content: req.body.content
});
imageFile.save((err, result) => {
if (err) {
return res.status(500).json({
title: 'An error occured',
error: err
});
}
res.status(201).json({
message: 'User created',
obj: result
});
});
});
module.exports = router;
app.js
const express = require('express');
var bodyParser = require('body-parser');
const port = process.env.PORT || 3000;
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var appRoutes = require('./routes/app');
var userRoutes = require('./routes/user');
var imgRoutes = require('./routes/img');
var app = express();
// Start
app.use(express.static(path.join(__dirname, '../awesome-drill/dist')));
app.use(logger('dev'));
app.use(bodyParser.json({ limit: '10mb' }));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-Width, Content-Type, Accept');
res.setHeader('Access-Control-Allow-Methods', 'POST, GET, PATCH, DELETE, OPTIONS');
next();
});
app.use('/user', userRoutes);
app.use('/img', imgRoutes);
app.use('/', appRoutes);
app.use(express.static('routes'));
// It's for routing SPA
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, '../awesome-drill/dist/index.html'));
});
app.listen(port, () => {
console.log(`Server is up on port ${port}`);
});
frontside service (angular4)
import { Injectable } from '#angular/core';
import {Http, Headers, Response} from '#angular/http';
#Injectable()
export class FileService {
public userId = localStorage.getItem('userId');
constructor(private http: Http) { }
imgUpload(obj) {
const body = JSON.stringify(obj);
const headers = new Headers({
'Content-Type': 'application/json'
});
return this.http.post('img/upload', body, {
headers: headers
})
.map((response: Response) => response.json());
}
}
Thanks to you, I found my mistake and I added it. However, 404 error still occur.
It's my folder structure.

Answer 1

You aren't exporting your router. Add the following to the end of your routes/img.js file.
module.exports = router;
The way you have it now, there is no default export, so when you require('./routes/img') you're importing nothing. If you were to console.log(imgRoutes) in app.js it would probably return undefined.