How to upload a single image file with next.js to mongodb?

Question

When I'm uploading form data to mongodb, in the image section it shows this: "C:\fakepath\imageName.jpg" with no actual image in it. And when I fetch the data from the database and map them, all the other data like title and body gets shown, but not the image. Because there wasn't any image to begin with. It was just a fake path.

So, how can I upload image file not the path to MongoDB.

I'm using Next.js and the mongodb npm package.

This is the pages/api/new-post.js file:

import { MongoClient } from "mongodb";

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const data = req.body

    const client = await MongoClient.connect('mongodb://localhost:27017/blog-nextjs')
    const db = client.db()

    const postCollections = db.collection('posts')
    const result = await postCollections.insertOne(data)
    console.log(result)

    client.close()
    res.status(201).json({message: 'Post Inserted'})
  }
}

The form code I used in pages/new-post.js are:

import { useRef } from "react";

export default function NewPostForm(props) {

  const titleInputRef = useRef()
  const imageInputRef = useRef()
  const bodyInputRef = useRef()

  function submitHandler(e) {
    e.preventDefault()

    const enteredTitle = titleInputRef.current.value
    const enteredImage = imageInputRef.current.value
    const enteredBody = bodyInputRef.current.value

    const postData = {
      title: enteredTitle,
      image: enteredImage,
      body: enteredBody
    }

    props.onAddPost(postData)
  }

  return (
    <div>
      <form onSubmit={submitHandler}>
        <div>
          <label htmlFor="title">Title</label>
          <input
            placeholder="Post Title"
            required
            type="text"
            ref={titleInputRef}
          />
        </div>
        <div>
          <label htmlFor="body">Post</label>
          <textarea
            placeholder="Post Body "
            required
            ref={bodyInputRef}
          ></textarea>
        </div>
        <div>
          <label htmlFor="image">Image</label>
          <input
            type="file"
            required
            placeholder="Image"
            accept="image/png, image/gif, image/jpeg"
            // accept="image/*"
            ref={imageInputRef}

          />
        </div>
        <div><button>Post</button></div>
      </form>
    </div>
  );
}

Answer 1

It's a bad approach to load images directly in MongoDb

You should store it to 3d party hostings and save only link(s) to your image.

Check related question