Update module not works in Node.js

Issue

I made a blog using node and ejs, but my problem arises when I want to make an update of a post, the texts are updated without problem, but the attached image is lost even if it has not been edited.

I tried to make a Path for the image, do some quick debbug and console checks. This is my edit and update modules

`//Modulo para editar un post
app.get("/edit/:id", (req, res) => {
  const postId = req.params.id;

  db.query("SELECT * FROM posts WHERE id = ?", [postId], (err, results) => {
    if (err) throw err;
    res.render("edit", { post: results[0] });
  });
});

//Modulo de actualización
app.post("/update/:id", upload.single('image'), (req, res) => {
  const postId = req.params.id;
  const { title, content } = req.body;
  const imagePath = req.file ? req.file.filename : null;

  console.log(req.file);  // Verifica si hay un archivo cargado
  console.log(imagePath); // Verifica la ruta de la imagen

  db.query(
    "UPDATE posts SET title = ?, content = ?, image_path = ? WHERE id = ?",
    [title, content, imagePath, postId],
    (err, results) => {
      if (err) throw err;
      res.redirect("/index");
    }
  );
});`

and this is my ejs view

<form class="blog" action="/update/<%= post.id %>" method="POST" enctype="multipart/form-data">
      <input type="text" name="title" value="<%= post.title %>" required />
      <input type="file" name="image" accept="image/*" />
      <input type="text" name="content" value="<%= post.content %>" required />
      <button type="submit">Actualizar cambios</button>
    </form> 

Solution

To keep the previously loaded image of the post in the update form, you can add a hidden field (input of type hidden) that stores the path to the current image. Then, you can use that value to display the current image in the form. Here is the updated form:

<form class="blog" action="/update/<%= post.id %>" method="POST" enctype="multipart/form-data">
  <input type="text" name="title" value="<%= post.title %>" required />
  <input type="hidden" name="existingImage" value="<%= post.image_path %>" />
  <input type="file" name="image" accept="image/*" />
  <input type="text" name="content" value="<%= post.content %>" required />
  <button type="submit">Actualizar cambios</button>
</form>

In this code, a hidden field called existingImage has been added which takes the value of <%= post.image_path %>. This field will store the path to the current image of the post. Then, in your update path, you can use this value to decide if you should update the image or not:

// Ruta de actualización
app.post("/update/:id", upload.single('image'), (req, res) => {
  const postId = req.params.id;
  const { title, content } = req.body;
  const existingImagePath = req.body.existingImage;  // Obtén la ruta de la imagen existente

  console.log(req.file);  // Verifica si hay un archivo cargado
  console.log(existingImagePath); // Verifica la ruta de la imagen existente

  // Verifica si hay una nueva imagen cargada
  if (req.file) {
    const imagePath = req.file.filename;

    db.query(
      "UPDATE posts SET title = ?, content = ?, image_path = ? WHERE id = ?",
      [title, content, imagePath, postId],
      (err, results) => {
        if (err) throw err;
        res.redirect("/index");
      }
    );
  } else {
    // No hay una nueva imagen cargada, actualiza solo el título y el contenido
    db.query(
      "UPDATE posts SET title = ?, content = ?, image_path = ? WHERE id = ?",
      [title, content, existingImagePath, postId],
      (err, results) => {
        if (err) throw err;
        res.redirect("/index");
      }
    );
  }
});

With this, if you do not load a new image, the form will send the path of the existing image as existingImage, and the path of the current image will be kept in the database.

Answered By - Juan Flores