Stack Exchange
File Upload With Multer/GridFS MERN Still Showing Fakepath On Upload And Showing No Errors
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.

I also want to mention that I have an existing MongoDB collection named "profiles" that I want this File Upload data to go to. As you can see, for the gfs.collection and bucket name I used "profiles" because it was the existing name of the collection. Not sure if this is correct.
