IMAGE PREVIEW FOR EDIT FORM

 BEFORE UPLOADING NEW IMAGE A PREVIEW OF OLD IMAGE IS DISPLAYED.

IT HAS TO BE DISPLAYED IN A LOWER RESOLUTION.

WE USE CLOUDINARY FEATURES.WE REPLACE THE ORIGINAL URL WITH A  UPDATED URL. SOME PARAMETERS ARE ADDED TO THE ORIGINAL URL

IN CONTROLLER LISTING.JS IS UPDATED.

module.exports.editListing = async (req, res) => {

  let { id } = req.params;

  const listing = await Listing.findById(id);

  if (!listing) {

    req.flash("error", "Listing requested doesn't exist!");

    res.redirect("/listings");

  }

  let originalUrl = listing.image.url;

  originalUrl=originalUrl.replace("/upload", "/upload/h_200,w_200");

  res.render("listings/edit.ejs", { listing, originalUrl });

};

EDIT.EJS

<div>

        Original Image <br />

        <img src="<%=originalUrl%>" />

      </div>