How to send an image from the client to server in Node.js without saving the file

Question

Currently, I'm building a web app the uses Node.js and express for my server side application. I am pretty new to client-server applications and am not sure how to go about sending an image from my clientside website to my express server. I want to process the image once it reaches the server but I don't want to store the file on the server. I have a file <input> in my index.html which i want to use for the client to select their image, but I don't know how to pass this to the server to be used for a variable within a separate script that processes the image and sends the client a resulting calculation back. Any advice on how to move forward is much appreciated!

Answer 1

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.