Post Images Using muter and Express.js/handlebars/sequelize

Question

I am using multer package to upload photos. I am able to upload the image file and submit it. it gets submitted into a file called images in the public folder; however, it does not actually get posted with the post_text and post_title. My question is how do i make these images become dynamic and linked with my post and user models? Do i have to create an Image model and create a reference between the post and image? like imageBelongstoPost?

Here is my MVC file structure

here is the multer POST route:

const upload = multer({
dest: "../public/images"
})

router.post(
"/upload",
upload.single("image"),
(req,res) => {
  const tempPath = req.file.path;
  console.log(__dirname)
  const targetPath = path.join(__dirname, `../public/images/${req.file.originalname}`)

  if(path.extname(req.file.originalname).toLowerCase() === ".png"){
    fs.rename(tempPath, targetPath, err => {
      if(err) return handleError(err, res)
    })

    res.status(200)
    .contentType("text/plain")
    .end("File uploaded")



  }else{
    fs.unlink(tempPath, err=> {
      if(err) throw(err)

      res
      .status(404)
      .contentType("text/plain"
      .end("only .png files are allowed!"))
    })
  }
}
)

here is my Post.js model

const { Model, DataTypes } = require('sequelize');
const sequelize = require('../config/connection');
// create our Post model
class Post extends Model {}

// create fields/columns for Post model
Post.init(
  {
    id: {
      type: DataTypes.INTEGER,
      allowNull: false,
      primaryKey: true,
      autoIncrement: true
    },
    title: {
      type: DataTypes.STRING,
      allowNull: false
    },
    post_text: {
      type: DataTypes.STRING,
      allowNull: false,
    },
    user_id: {
      type: DataTypes.INTEGER,
      references: {
        model: 'user',
        key: 'id'
      }
    }
  },
  {
    sequelize,
    freezeTableName: true,
    underscored: true,
    modelName: 'post'
  }
);

module.exports = Post;

Here is the handlebars.js file that holds the form

<section>
  <h2>Create New Post</h2>

  <form class="new-post-form">
    <div>
      <label for="post-title">Title</label>
      <input type="text" id="post-title" name="post-title" />
    </div>


  {{!-- insert input file ends --}}
    <div>
      <label for="post-text">Text</label>
      <textarea name="post-text" id="post-text" cols="30" rows="10" placeholder="Say Anything..."></textarea>
    </div>
    <button type="submit" class="btn">Post</button>
  </form>

  {{!-- second formn for image --}}
  <form method="POST" action="/upload" enctype="multipart/form-data">
  <input type="file" accept="image/*" name="image" id="file"  onchange="loadFile(event)" style="display: block;"/>
    Add Photo  <i class="fa fa-upload" style="font-size:18px;"></i>
    </label>
    {{!-- display the image that was uploaded dynamically --}}
    <p><img id="output" width="200" src="../public/images/evaluEAT.png"/></p>
    <input type="submit" value="Submit">
  </form>
</section>

{{#if posts.length}}
<section>
  <h2>Your Posts</h2>
  <ol>
    {{#each posts as |post|}}
    <li>
      {{> post-info post}}
      <a href="/dashboard/edit/{{post.id}}" class="edit-link">Edit post</a>
    </li>
    {{/each}}
  </ol>
</section>
{{/if}}
<script src="/javascript/add-image.js"></script>
<script src="/javascript/add-post.js"></script>