ASP.Net Core upload file with record using AngularJS

Question

Am using the new implementation of uploading files which is the IFormFile. I created a view model and mapped it on a model, however, I am getting a null value on the ImageFile property of the view model. In inserting the record, I am using AngularJS to prevent it from reloading. Below is my views and controller.

public string CreateNewProduct([FromBody] ProductViewModel _product)
    {
        var imgFile = _product.ImageFile; 
        var fileName = ContentDispositionHeaderValue.Parse(imgFile.ContentDisposition).FileName.Trim('"');
        var targetDirectory = Path.Combine(environment.WebRootPath, string.Format("Common\\Images\\"));
        var savePath = Path.Combine(targetDirectory, fileName);
        imgFile.CopyTo(new FileStream(savePath, FileMode.Create));

        Products product = new Products
        {
            ItemCode = _product.ItemCode,
            FileName = fileName,
            FilePath = savePath
        };

        context.Products.Add(product);
        context.SaveChanges();

        return "";
    }

And here is my view in a dialog box.

<div class="modal" role="dialog" id="addItemDialog">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h3 class="text-info">Add New Item</h3>
        </div>
        <div class="modal-body">
            <form id="newproductform" class="form-horizontal" role="form" enctype="multipart/form-data">

                <div class="form-group">
                    <span class="col-sm-3 control-label">Item Code</span>
                    <div class="col-sm-6">
                        <input type="text" class="form-control input-sm" ng-model="ItemCode" />
                    </div>
                </div>

                <div class="form-group">
                    <span class="col-sm-3 control-label">Image</span>
                    <input type="file" name="file" accept="image/*" onchange="angular.element(this).scope().selectFileforUpload(this.files)" required />
                    <span class="error" ng-show="(f1.file.$dirty || IsFormSubmitted) && f1.file.$error.required">Image required!</span>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="submit" class="btn btn-success" ng-click="InsertProduct()">Submit</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

I just used the submit button but still I get null value on ImageFile property on the view model.

Here is my view model.

    public class ProductViewModel
{
    public string ItemCode { get; set; }
    //[FileExtensions(Extensions = "jpg/jpeg")]
    public IFormFile ImageFile { get; set; } 
}