Im going to explain it with an example. Suppose I want to send an image for a university I want do add in a data base somewhere. In my form I would have:

<form action="" class='add-item-form'>
    <input id='image-file' type='file'/>
    <input type="submit" id="submitFormBtn"/>
</form>

Now, the idea is to create a handler that activates when the submitFormBtn is clicked, using react, or vue, or angular or plain javascript. Here there is an example of how the handler could look like:

function onSubmit() {
    let input = document.querySelector("#image-file") as HTMLInputElement;
    if(!!input.files){
        // files is an array but e assume we only added one image
        const file = input.files[0];
        let reader = new FileReader();
        // the reader triggers the functions whenever it's been loaded
        reader.onload = function () {
          // reader.results contains the binary string
          // btoa converts the binary string into base64
          //to ease data transportation through the wire
          let base64_data = window.btoa(reader.result);
          // service that makes the post request to the server
          // implementations vary, I'd use axios library though
          TeacherService.addUniversity(base64_data)
            .then(res => {
                   // do something is it was a success
            }).catch(err => {
                   // do something is it there was an error
            }).finally(()=>{
                   // do someting either way
            });
        }
        reader.readAsBinaryString(file);
    }
}

Now, the ball is in the server, you just need to receive the json as always and decode the base64 data coming from the client, there are plenty of libraries to do just that depending on your server language. Once decoded you save the file with the appropriate file name with its file extension, and that is basically it, from there you'll have the original file in your server and you can do any further processing with it.