File Upload With Multer/GridFS MERN Still Showing Fakepath On Upload And Showing No Errors - file-upload

Question

I'm working with Multer/GridFS for the first time while using the MERN stack. I'm not seeing any errors, but for some reason, when uploading an image, the MongoDB Collection still shows fakepath.
Relevant Code From Server.js File
const express = require("express");
const connectDB = require("./config/db");
const multer = require("multer");
const GridFsStorage = require("multer-gridfs-storage");
const Grid = require("gridfs-stream");
const methodOverride = require("method-override");
const path = require("path");
const crypto = require("crypto");
const bodyParser = require("body-parser");
const mongoose = require("mongoose");
const config = require("config");
const db = config.get("mongoURI");
const app = express();
// Init gfs
let gfs;
// Connect Database
connectDB("open", () => {
// Initialize Stream
gfs = Grid(connectDB().db, mongoose.mongo);
gfs.collection("profiles");
});
// Create Storage Engine
const storage = new GridFsStorage({
db: connectDB(),
file: (req, file) => {
return new Promise((resolve, reject) => {
crypto.randomBytes(16, (err, buf) => {
if (err) {
return reject(err);
}
const filename = buf.toString("hex") + path.extname(file.originalname);
const fileInfo = {
filename: filename,
// Should Match Collection Name
bucketName: "profiles"
};
resolve(fileInfo);
});
});
}
});
const upload = multer({ storage });
module.exports = upload;
Relevant Code From Route File
// #route POST api/profile
// #description Create Or Update Current User's Profile
// #access Private
router.post(
"/",
[
auth,
upload.single("profileImage"),
[
(check("archetype", "Archetype Is Required.")
.not()
.isEmpty(),
check("profileImage", "Profile Picture Is Required.")
.not()
.isEmpty())
]
],
async (req, res) => {
const errors = validationResult(req);
if (!errors.isEmpty()) {
return res.status(400).json({ errors: errors.array() });
}
Relevant Code From Form Input File
<form
onSubmit={e => onSubmit(e)}
className='form'
enctype='multipart/form-data'
>
<h3>Basic Profile</h3>
<div className='grid-2'>
<div className='form-group'>
<label>Profile Picture</label>
<label htmlFor='file-upload-profile' className='choose-file'>
Upload Image File
</label>
<input
name='profileImage'
id='file-upload-profile'
type='file'
accept='file_extension|image/*|media_type'
// value={profileImage}
onChange={e => onChange(e)}
/>
MongoDB Shows The Following In Profile Collection:
profileImage:"C:\fakepath\Test Image.jpg"
Thoughts
As I said, there are no errors showing in the terminal or console. The file input name is profileImage, which is what I use in the POST request.