I'm not sure why when making a POST request on Postman, I'm successfully storing the URLs in the DB by grabbing the file and retrieving its name.

But when I try it on the browser, I get a 500 error. The auth token's coming back correctly, the logged data is also containing the correct information so it's not entirely clear to me what I'm doing wrong even though I'm doing it exactly the same way as how I'm doing it in Postman and it works fine there.

In the server logs I see an error that says: Call to a member function getClientOriginalName() on null but as mentioned before - the upload works fine on Postman.

What could be issue?

Here's my JS:

const [selectedFile, setSelectedFile] = useState(null);
let authToken = localStorage.getItem('token');

const onFormSubmit = (e) => {
    e.preventDefault()
    fileUpload(selectedFile);
}

const onChange = (e) => {
    let files = e.target.files || e.dataTransfer.files;
    if (!files.length) {
        return;
    }
    createImage(files[0]);
}

const createImage = (file) => {
    let reader = new FileReader();
    reader.onload = (e) => {
        setSelectedFile(e.target.result);
    };
    reader.readAsDataURL(file);
}

const fileUpload = (selectedFile) => {
    const url = 'http://localhost:8005/api/file-upload';
    const formData = {file: selectedFile}

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

    console.log(authToken);
    console.log(formData);
    console.log(headers);

    JSON.stringify(formData);
    axios.post(url, formData, {
        headers: headers
    }).then(resp => {
            console.log(resp);
        }).catch(error => {
            console.log(error);
        });
}

return (
    <form>
       <input type="file" onChange={onChange} name="userUpload" required/>
       <Button variant="primary" onClick={onFormSubmit}>Upload!</Button>
    </form>
);