MEAN project - Page doesn't render newly uploaded photo even thought it's successfully...

I'm making a full stack MEAN project where, among other things, you need to be able to optionally upload your profile photo after making an account.

Now, I created a "photos" folder inside a "public" folder that is present by default in Angular apps and at the serve side I'm using a Multer library to put any uploaded photo there.

This works as it suppose to (photo is successfully put inside the "photos" folder and "profile_photo" field inside "users" mongodb collection is successfully changed to the name of the newly uploaded photo), but for some reason the photo isn't showing and in my browser console I get an error:

"Failed to load resource: the server responded with a status of 404 (Not Found)"
​

Even when I refresh the page I get this error:

"GET http://localhost:4200/photos/profile_photo.PNG 404 (Not Found)"
​

But, there are two weird things happening:

1. 
   If I try to uplaod a photo that is already present in "photos" folder (and not from some other place on my computer) it works.
   
   
2. 
   When I change anything in my angular files, the frontend project re renders and the photo automatically shows up
   

My project has two folders:

1. "backend" - where all my server side files and libraries are and among them there an "upload.ts" file in "middlewares" folder where to login to handle photo uploads is:

import multer from "multer"

const storage = multer.diskStorage(
{
destination: "../frontend/public/photos",
filename: (req, file, cb) => {
cb(null, file.originalname);
},
}
);

const upload = multer({ storage: storage });

export default upload;


Now, in my "user.router.ts" I have this specific route (there is a "import upload from "../middlewares/upload";" clause in the file):

user_router.route("/updateProfilePhoto").post(
upload.single('profile_photo_object'),
(req, res) => new UserController().updateProfilePhoto(req, res)
)


My "server.ts" file looks like this:

import express from 'express'
import cors from 'cors';
import mongoose from 'mongoose';
import user_router from './routers/user.router';

const app = express();
app.use(cors());
app.use(express.json());

mongoose.connect('mongodb://127.0.0.1:27017/database');
const conn = mongoose.connection;
conn.once("open", () => {
console.log("DB ok");
})

const router = express.Router();
router.use("/users", user_router);

app.use("/", router);
app.listen(4000, ()=>console.log('Express running on port 4000'))

1. "frontend" - where all my server side files and libraries and among them are the .ts and .html files that handle everything related to changing and displaying profile photos (I will show only important parts of the code):

//profile_update.component.ts - handles updating a profile photo

const form_data = new FormData();
form_data.append("username", this.logged_user.username);
form_data.append('profile_photo_object', this.photo_object);

this.user_service.updateProfilePhoto(form_data).subscribe(
res => {
alert(res.text);
if (res.is_valid) {
localStorage.clear();
this.logged_user.profile_photo = this.photo_name;
this.listener_service.setItem("logged_user", this.logged_user);
this.router.navigate(["profile"]);
}
}
)


//profile.component.ts - The whole profile component should, among other things, display the profile photo of the logged in user

ngOnInit(): void {
this.logged_user = this.listener_service.getItem("logged_user");
}


//profile.component.html - This is where the photo is displayed

<img [src]="'/photos/' + logged_user.profile_photo" style="width:100%" />


Does anyone know why this happens and how can I change it to successfully display (it's definitely uploaded properly) a new photo from any folder on my computer on the first try?

And just one note to add, I can modify other info about users (username, email...) from my app and it works. The only problem is the profile photo.

Continue reading...