I'm not sure why console.log(formData); displays an empty (FormData {}) when checking the console, despite console.log(data); displaying the correct data.

Also, when I do a POST request, I get an error that says Missing boundary in multipart/form-data POST. I checked on SO and I see multiple places that say that I should put headers:{content-type: undefined} in the headers but that didn't do the trick.

I believe you need to use FormData to send a file via POST request. How can I successfully send the file being uploaded via a POST request?

Note: The API works with Postman, so we can rule out that API's the problem,

JS code:

import React, { useState } from 'react';
import {Button, Image, Modal} from "react-bootstrap";

const Gallery = () => {

    const [filePreview, setFilePreview] = useState(null);

    const [selectedFile, setSelectedFile] = useState(null);

    const handleShow = () => setShow(true);

    const handleFileInput = (e) => {
        setFilePreview(URL.createObjectURL(e.target.files[0]));
        setSelectedFile(e.target.files[0]);
    }

    const uploadFile = () => {

       var formData = new FormData();
       formData.append("userUpload",selectedFile);

       console.log(formData);

        const data = {
            'userUpload': selectedFile
        }

        const headers = {
            "Accept": 'application/json',
            "Authorization": `Bearer ${authToken}`
        }

        console.log(data);

        axios.post('http://localhost:8005/api/file-upload', data, {headers})
            .then(resp => {
                console.log(resp);
            }).catch(error => {
            console.log(error);
        });

    }

    return (
        <form encType="multipart/form-data">
            <div className="fileUpload text-center">
                <input type="file" onChange={handleFileInput} name="userUpload" required/>
                <Button variant="primary" onClick={handleShow}>
                    Launch demo modal
                </Button>
            </div>

            <Modal show={show} onHide={handleClose}>
                <Modal.Body>
                    <Image fluid src={filePreview}/>
                </Modal.Body>
                <Modal.Footer>
                    <Button variant="primary" onClick={() => uploadFile()}>Upload!</Button>
                </Modal.Footer>
            </Modal>

        </form>
    );
}

export default Gallery;