How to implement edit form with file upload

Question

Trying to update a form without uploading a new image. I'm using multer for the image upload. it works very well when i create a form.

I'm using reactJs for frontend and node for the server side.

This is the front end code with react

import React, { useState, useEffect } from 'react';
import { useParams } from "react-router-dom";
import useFetch from "./fetch"; 

function EditForm() {  
    const { id } = useParams();
    const { contestant: form, error, isPending } = 
    useFetch("http://localhost:5000/dashboard/form_single/" + 
    id);
    
    const [name, setName] = useState('');
    const [address, setAddress] = useState('');
    const [fileName, setFileName] = useState('');

    useEffect(() => {
        setName(form.full_name);
        setAddress(form.home_address);
    }, [form])
    
        const editForm = async (id) => {
          try { 
            const formData = new FormData();
            formData.append("name", name);
            formData.append( "home_address", address);
            formData.append("image", fileName);

            const myHeaders = new Headers();
            myHeaders.append("jwtToken", localStorage.jwtToken);
      
            await 
fetch(`http://localhost:5000/dashboard/form_update/${id}`, {
              method: "PUT",
              headers: myHeaders,
              body: formData,
            });

          } catch (err) {
            console.error(err.message);
          }
        };

        const onChangeFile = e => {
          setFileName(e.target.files[0]);
        }

    return (
        <div>
            { isPending && <div>Loading...</div> }
            { error && <div>{ error }</div> }
            <form encType="multipart/form-data" 
             onSubmit={() => editForm(form.form_id)}>
                 <input
                  type="text"
                  className="form-control"
                  value={name || ''}
                 onChange={e => setName(e.target.value)}
                 />
                  <input
                  type="text"
                  className="form-control"
                  value={address || ''}
                  onChange={e => setAddress(e.target.value)}
                  />
                   <input
                   type="file"
                   id="update"
                   name="image"
                   onChange={onChangeFile}
                   />
                    <button type ="submit" >Save</button>
                    </form>
                    <div>
                      <img 
                      alt="contestant" 
          src= {`http://localhost:5000/upload/${form.passport}`} 
          className="rounded-circle" style={{width: "100px", 
           height: "100px"}}/>
        </div>
      </div>
    );
}

export default EditForm;

UNFORTUNATELY I GET Cannot read properties of undefined (reading 'filename'). I've tried to make multer image upload optional but it did'nt work. The code bellow is the api.

This is the server side code. Nodejs

router.put("/form_update/:id", upload.single('image'), async(req, 
res) => {
    try { 
       const { id } = req.params;
       const image = req.file.filename;
       const { name, home_address } = req.body;
       
      const updateForm = await pool.query("UPDATE form SET 
       full_name = $1, home_address = $2, passport = $3 WHERE 
       form_id = $4 
       RETURNING *", [name, home_address, image, id]);
        
       res.json("Form was updated");
      } catch (err) {
        console.error(err.message);
      }
});

how do i not always have to change image everytime i need to edit a form.

Answer 1

on the server, check if fields are provided, and then store values for each, and construct query dynamically, and when done checking, execute query

you could list fields in an array and then iterate them and construct query and values against req.body

you could also add some validation (check if there is id etc., you could add that on the front-end as well)

try this:

router.put("/form_update/:id", upload.single('image'), async(req, res) => {
  try {

    // fields. same as in req.body
    const fields = ['full_name', 'home_address', 'something', 'else'];

    // store values
    const values = [];

    // dynamic query string
    let stmt = [];

    const {id } = req.params;

    // add some validation
    if(!id) {
      console.error('no id..');
      return res.json({msg:"err: no id"});
    }

    const image = req.file ? req.file.filename : '';

    // build query
    fields.map((field)=>{

      if(req.body[field]) {
        values.push(req.body[field]);
        stmt.push(`${field} = $${values.length}`);
      }
    });

    // check image, as it's not in req.body
    if(image) {
      values.push(image);
      stmt.push(`passport = $${values.length}`);
    }    


    // no data..end
    if(!values.length) {
      console.log('no data..');
      return res.json({msg:'no data..'});
    }


    // finish
    stmt = "UPDATE form SET " + stmt.join(', ');
    
    values.push(id);
    stmt += ` WHERE form_id = $${values.length}`;

    stmt += ' RETURNING *';

    const updateForm = await pool.query(stmt, values);

    res.json({msg:"Form was updated"});

  } catch (err) {
    console.error(err.message);
  }
});