Cant upload image in custom-file-input

Question

Hi am trying to create a image upload system

but there seems to be a problem with the View while i try to upload

 

<div class="form-group">
                <label asp-for="Photo" class="custom-file"></label>

                <div class="custom-file">
                    <input type="file" asp-for="Photo"  class="custom-file-               input" name="customFile" id="customFile"/>
                    <label class="custom-file-label" for="customFile">Choose file</label>
                </div>
                <span asp-validation-for="Photo" class="text-danger"></span>
            </div>

 this is the full page:

 

@model Test4.ViewModels.ProductsViewModel

@{
    ViewData["Title"] = "UploadImage";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h1>UploadImage</h1>

<h4>Products</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="UploadImage">

            <div class="form-group">
                <label asp-for="ProductTitle" class="control-label"></label>
                <input asp-for="ProductTitle" class="form-control" />
                <span asp-validation-for="ProductTitle" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="ProductDescription" class="control-label"></label>
                <input asp-for="ProductDescription" class="form-control" />
                <span asp-validation-for="ProductDescription" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Price" class="control-label"></label>
                <input asp-for="Price" class="form-control" />
                <span asp-validation-for="Price" class="text-danger"></span>
            </div>



            <div class="form-group">
                <label asp-for="Photo" class="custom-file"></label>

                <div class="custom-file">
                    <input type="file" asp-for="Photo"  class="custom-file-input" name="customFile" id="customFile"/>
                    <label class="custom-file-label" for="customFile">Choose file</label>
                </div>
                <span asp-validation-for="Photo" class="text-danger"></span>
            </div>

            <div class="form-group">
                <button type="submit" class="btn btn-outline-secondary" >Upload</button>
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-action="Index">Back to List</a>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script type="text/javascript">
    $(".custom-file-input").on("change", function () {
        var fileName = $(this).val().split("\\").pop();
        $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
    });
</script>
 }

 It shows the name of the image in the input field and when hover over the input it shows the file as well 

but once i hit submit it gives me the error and tells me that it is required.

 

ProductViewModel :

public class ProductsViewModel
    {
        [Required]
        [Display(Name = "Product Title")]
        public string ProductTitle { get; set; }
        [Required]
        [Display(Name = "Product Description")]
        public string ProductDescription { get; set; }
        [Required]
        public int Price { get; set; }
        [Required(ErrorMessage = "Please choose profile image")]
        public IFormFile Photo { get; set; }
    }