Frontend/Backend APIs with axios and express issues, using AWS rekognition as well

Question

Going to try my best to explain this one, Basically trying to send some data from the front end about an image that I got from input type=file, to which the back end activates a script that analyses an image using AWS rekognition, from the front end I only need the image name to be put into the AWS script as the image will also be inside the s3 bucket. This is only a project for class. Currently neither of my post and get requests to send the image data from the front end, and send the lables that aws script returns are working. Its a little all over the place as I'm very new to this. Currently have backend and aws script in different files but the plan is to put them in the same backend. Currently only the image data axios request and backend end point is set up. I really hope this makes sense because my god its been messing with my head.

Here is the front end,

import { useState, useEffect } from 'react';
import React, { Component } from 'react'

import Turnershomenav from "../../../components/homepage/homepage-components/Turnershomenav.js";
import './Turnersimagebody.css'
import imagesbackgroundimg from './turnersimage-images/orangechev.jpg'
import uploadfileicon from './turnersimage-images/uploadbutton.png'
import axios from 'axios'
//function to open file upload section begins 




export default function Turnersimagebody() {
    const [showUploadForm, setShowUploadform] = useState('noForm')
    const handleClick = () => {
        setShowUploadform('showForm')
    }

//function to open file upload section ends 

//function to select file begins

let imgData = ""
    const fileSelectedHandler = event => {
         imgData = (event.target.files[0]);
         console.log(imgData)
    }
//function to select file ends

//axios post request starts
const [data, setData] = useState([])
const test = 7
const HandleUpload = () => {
    useEffect(() => {
     axios.post(`http://localhost:4000/getImagedata/${test}`)
  .then(res => {setData(res.data)
    })
    },[],console.log(data))
}
//axios post request ends


    return (
                <div> 
            <div className = "turnersimagenav">
            <Turnershomenav />
            </div>
                
                    <img className="img-btn-upload" alt = "upload icon" src = {uploadfileicon} onClick = {handleClick}></img>

                    {showUploadForm === 'showForm' &&
                    <div className='form-upload-container'>
                        <div className='form-upload-divider'>
                            <div className='form-upload-top-section'></div>
                                <div className='form-upload-bottom-section'>
                                    <div className='form-upload-item'>Choose File</div>
                                        <div className='form-upload-item'>-----></div>
                                    <div className='form-upload-item'>Upload File</div>
                                        <div className='form-upload-item'>-----></div>
                                    <div className='form-upload-item'>Find Car</div>
                                </div>
                                    <div className='form-inputs-section'>
                                    <div className='form-inputs-section-item'>
                                        <input type = "file" className = 'form-inputs-section-item-1'onChange={fileSelectedHandler} ></input></div>
                                    <div className='form-inputs-section-item'>
                                        <button type = "button" className = 'form-inputs-section-item-2' onChange={HandleUpload}>Upload</button></div>
                                    <div className='form-inputs-section-item'>
                                        <button type = "button" className = 'form-inputs-section-item-3'>Search</button></div>
                                </div>
                        </div>
                    </div>
                    }
                    {showUploadForm === "noForm" && <div></div>}       


                

            <img src = {imagesbackgroundimg} alt = 'background img' className = "turnersimagebody-background" ></img>
                
        </div>
    )
}

Here is the back end,

const express = require('express')
const cors = require('cors')

const app = express();
app.use(cors());
app.use(express.json());

app.get('http://localhost:3000/images/getImagedata:image_data', (req, res) => {
    const image_data = req.params.image_data
    console.log(image_data)
    })

app.listen(4000)

and here is the aws script for rekognition

const AWS = require('aws-sdk');

//credentials & region

AWS.config.update({
    accessKeyId: 'ACCESS KEY ID',
    secretAccessKey: 'SECRET ACCESS KEY',
    region: 'us-east-1'
});

//input parameters

const params = {
    Image: {
        S3Object: {
            Bucket: "MY BUCKET",
            Name: "IMAGE NAME"
        }
    },
    MaxLabels: 10,
    MinConfidence: 0
};


//Call AWS rekogniton Class
const rekogniton = new AWS.Rekognition();

//Detect labels
rekogniton.detectLabels(params, function(err, data) {
    if (err) console.log(err, err.stack); //error occurred
    else console.log(data)
})

currently using node index returns an object of labels, the ultimate goal is for the user, to select an image, click upload which sends the file to the backend where it is analyzed and the aws labels are returned. All from one button. Noob at this so I appreciate any and all help <3

• EDIT *

localhost:4000 is the backend, localhost:3000/images is the frontend - unsure if it only needs to be 3000