Fake Path File Upload and Retrieve - node.js

Question

I am uploading some personal information to Mongo DB via Express Server(Node) and React. The problem is the files aren't uploaded to the 'uploads directory' on my server and on the DB i can see a fake path of the document with file name. How can I retrieve the file to display to user? I am able to retrieve the other personal information
Below are the codes
This is upload middleware
const path = require('path')
const multer = require('multer')
var storage = multer.diskStorage({
destination: function(req, file, cb){
cb(null, __dirname + '/uploads')
},
filename: function(req, file, cb){
let ext = path.extname(file.originalname)
cb(null, Date.now() + ext)
}
})
var upload = multer ({
storage: storage,
fileFilter: function(req, file, callback){
if(
file.mimetype == "image/png" ||
file.mimetype == "document/pdf" ||
file.mimetype == "document/docx"
){
callback(null, true)
}
else{
console.log('Only png, pdf and Docx FILES ALLOWED')
callback(null, false)
}
},
limits: {
fileSize: 1024 * 1024 * 2
}
})
This is Add Project controller
exports.add = (req, res, next) =>{
const { title, category, duration, durationSys, description, budget, addedBy, active,avatar} = req.body
let newProject = new Project({
title,
category,
duration,
durationSys,
description,
budget,
addedBy,
active,
avatar
})
if(req.file){
newProject.avatar = req.file.path
}
newProject.save()
.then(response =>{
res.json({
message: 'Project added successfully'
})
.catch(error =>{
res.json({
message: 'An error ocurred. Try again'
})
})
})
};
This is the route
router.post('/addproject', upload.single("avatar"), add)
Frontend
const Project= ({history}) => {
const [values, setValues] = useState({
title: '',
category: '',
duration:'',
durationSys: '',
description: 'Describe your project vividly here',
avatar: '',
active:'true',
budget:'',
addedBy: (isAuth().email),
buttonText: 'Post'
});
const { title, category, duration, durationSys,description,avatar,
active,addedBy, budget, buttonText } = values;
const handleChange = name => event => {
setValues({ ...values, [name]: event.target.value } );
};
const clickSubmit = event => {
event.preventDefault();
setValues({ ...values, buttonText: 'Posting Project...' });
console.log(avatar)
axios({
method: 'POST',
url: `${process.env.REACT_APP_API}/addproject`,
data: { title, category, duration, durationSys, description,
avatar, active, addedBy, budget }
})
.then(response => {
console.log('PROJECT ADD SUCCESS', response);
setValues({ ...values, title: '', category: '', duration:
'', durationSys: '',budget: '', description:'',avatar: '',
addedBy: '', buttonText: 'Success' });
toast.success(response.data.message);
})
.catch(error => {
console.log('PROJECT ADD ERROR', error.response.data);
setValues({ ...values, buttonText: 'Try Again' });
toast.error(error.response.data.error);
});
};