*****UPLOADING IMAGE*****

 HERE,OUR BACKEND CAN ONLY ACCEPT URL ENCODED DATA.

app.use(express.urlencoded({ extended: true }));

IT DOESNOT ALLOW OTHER TYPES.

TO ENABLE SENDING FILES,

        enctype="multipart/form-data"

WE USE MULTER TO HANDLE MULTIPART/FORM DATA , PRIMARILY USED FOR UPLOADING FILES.

TO INSTALL: npm i multer

TO USE:

const multer = require("multer");

const upload = multer({ dest: "uploads" });

TO STORE THESE FILES WE USE A SINGLE MIDDLEWARE,

(upload.single("listing[image]")

IN SHOW.EJS

 <form

        method="POST"

        action="/listings"

        class="needs-validation"

        novalidate

        enctype="multipart/form-data"

      >

ADD A NEW FIELD,

 <div class="mb-3">

          <label for="image" class="form-label">Upload Image File</label>

          <input

            name="listing[image]"

            type="file"

            placeholder="Upload Image"

            class="form-control"

          />

        </div>

IN LISTING.JSconst multer = require("multer");

const upload = multer({ dest: "uploads" });

A POST METHOD IS CREATED,

  .post(upload.single("listing[image]"), (req, res) => {

    res.send(req.file);

  });