Passing Attachment to View Model from the View C#

In my Asp.Net MVC application, I passed the view model to the main view to collect the data from the user.

There is a section to upload files.

When I attached a file and submitted the data to the controller, I could see all the data filled from the view but it's not showing the attached file.

I also checked by putting alerts to the script whether it collects the attachments, It gets the file. But won't pass to the controller.

Can anyone tell me how to do this correctly?

I also mentioned this on the top of the view

@using (Html.BeginForm("Create", "Performance", FormMethod.Post, new { enctype = "multipart/form-data" }))

This is the top of the view

@model IEnumerable<KPIModels.ViewModels.MainDetailsVM>

This is the model

 public class SelfImprovementMainVM
    {
        public int SelfImpId { get; set; }
        public int EmpMarks { get; set; }
        public int SupervisorMarks { get; set; }
        public string Comments { get; set; }
        public byte[] Attachment { get; set; }
        public string FileType { get; set; }
        public string SelfImName { get; set; }
    }

this is the view

<div class="col-md-10"> @Html.Label("Attach your files") </div>
<div class="col-md-10">
  <input type="file" name="ImageData  " id="ImageData" onchange="checkImage(this)" /> @Html.ValidationMessageFor(model => model.First().SelfImprovementMainVMList[1].Attachment, "", new { @class = "text-danger" })
</div>
<img id="imageDisplay" src="" alt="" width="100" height="100" class="ml-1" />

< script type = "text/javascript" >

  function checkImage(obj) {
    var fileExtension = ['jpeg', 'jpg', 'png', 'gif', 'bmp', 'pdf'];

    if ($.inArray($(obj).val().split('.').pop().toLowerCase(), fileExtension) == -1) {

      msgDisplay('error', 'Upload Error', 'Only .jpeg, .jpg, .png, .gif, .bmp ,.pdf formats are allowed.');
      $("#imageDisplay").prop('src', '');
    } else {
      var files = obj.files;
      var reader = new FileReader();
      name = obj.value;
      reader.onload = function (e) {

        $("#imageDisplay").prop('src', e.target.result);
        alert(e.target.result);
      };

      reader.readAsDataURL(files[0]);
      alert(files[0]);
    }
  }

  <
  /script>

In controller, this file returns null

  HttpPostedFileBase file = Request.Files["ImageData"];

  if (file.ContentLength > 0) {
    selfs.MainDetailID = mainDetails.Id;
    selfs.Attachment = ConvertToBytes(file);
    selfs.FileType = file.FileName;
    dbs.SelfImprovementMain.Add(selfs);
    dbs.SaveChanges();
  }