File converting into empty array on angular to laravel post request

So I'm trying to perform a basic Laravel 5 post request which simply posts some data into a table, stores a file (image) into public storage under a name which is a possible combo of 20 random numbers following '.jpg', the url gets saved into the table and that is used to locate the image in an img tag (I'm aware this isn't the best approach so feel free to post any better ones should there be no answer to this question)

However when performing an ordinary post request with no special headers from Angular6 to Laravel5, for some reason the File keeps converting into an empty array. (Before and after shots are below)

Before:

0: Object { id: 0, body: null, file: File }

After:

0: Object { id: 0, body: null, file: [] }

The File is full and is used to create a preview on a canvas before submitting so It works, the console is logging this data the line before posting and returning the $req Request before performing any php code in Laravel so the only place anything could get lost in translation is the inbetween. Code is as follows:

Angular 6:

postToLaravel(object) {
  console.log(object.message);
  this.http.post(this.url + '/add/message', object).subscribe(res => {
    console.log(res);
  });
}

Laravel 5:

function addMessage(Request $req) {
    return $req->messages;

The empty array keeps pushing nothing to storage under a name its registered as a jpg file but no image is shown. Is there something I'm missing here?

Let me know should You need any extra info.

via Chebli Mohamed