How to know which file has been uploaded from multiple inputs of type file in reactjs using Express API

Question

I created an API to upload documents to my website. I require users to upload four documents and I have four buttons for file uploads.

I save these images in my MySQL database in a table called images.

What I need to do is know the type of file that is being uploaded so that in my DB I can create columns that specify that this document is for instance the "packaging document".

How can I send to my backend that this clicked file input button is of type packaging or commercial and so on so that i can correctly insert the documents into my DB and correctly and easily fetch them when needed.

here is a picture to make it a bit more clear:

here is my code:

backend API:

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const mysql = require('mysql');
const cookieParser = require('cookie-parser');
const session = require('express-session');
const multer = require('multer');
const path = require('path');
const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null,'images')
    },
    filename: (req, file, cb) => {
        cb(null, Date.now() + path.extname(file.originalname))
    }
});
const upload = multer({storage: storage});
const app = express();

app.post("/api/upload", upload.single('image') , (req, res) => {

    const image = req.file.filename;
    
    db.query("INSERT INTO images (image) VALUES (?)",[image], (err, result) => {
        if(err){
            console.log(err);
        }

        if(result){
            res.send({
                data: result,
                msg: "Image uploaded"
            })
        }
    })
});

Frontend:

const imageHandler = (event) => {
        const file = event.target.files[0];
        const formData = new FormData();

        formData.append('image', file);

        fetch(`http://localhost:3001/api/upload`, {
            method: 'POST',
            body: formData,
            headers: {
                'Accept': 'multipart/form-data',
             
            },
            credentials: 'include',
            
        })
        .then(res => res.json())
        .then(res => {
            setUploadStatus("pack")
        })
        .catch(err => {
            console.log(err);
        });
    }

 return (
 <Col md={5}>
                                    
            <Form.Group controlId="formFileSm" className="mb-1">
            <Form.Label className="font-12 color-gray">Packing List *</Form.Label>
            <Form.Control type="file"  accept="image/*" name= "image" onChange={imageHandler}/>
            </Form.Group>
                                      
            <Form.Group controlId="formFileSm" className="mb-1">
            <Form.Label className="font-12 color-gray">Commerical Invoice *</Form.Label>
            <Form.Control type="file" size="sm" name="comm" />
            </Form.Group>

            <Form.Group controlId="formFileSm" className="mb-1">
            <Form.Label className="font-12 color-gray">Certificate of Origin *</Form.Label>
            <Form.Control type="file" size="sm" name="coo" />
            </Form.Group>

            <Form.Group controlId="formFileSm" className="mb-1">
            <Form.Label className="font-12 color-gray">Other Documents</Form.Label>
            <Form.Control type="file" size="sm" name="otherdoc" />
            </Form.Group>
  </Col>
)

Answer 1

You have to tell it explicitly.

    const formData = new FormData();
    formData.append('image', file);
    formData.append('type', 'commercial');

for example