Trick to Send form-data and Image to backend through ajax and php

Got working on a particular task where the only way to improve the user's experience is to send their data through ajax request, the form actually contain 4 inputs with type "Text", and another with type "File" for the user's brand logo, after serializing the form through jQuery serialize method I discovered that input type of "file" cannot be serialized let alone sending them through ajax.

A simple google-search revealed some stack-overflow users had faced the same issue before, however the best answer, recommended passing all user's data through Javascript FormData Object which I found really complicating because I would need to do some form of loop at the backend, after a little racking of brain I finally came out with the below trick.

Here is a simple trick I used to avoid passing all data through *Javascript FormData *

Note: Use this only if privacy of the user's data doesn't matter as this will expose the submitted data in your browser NETWORK TAB.