I have dynamic inputs

The code works properly, but the input file type passed null

the AttachmentsDto ,,,

 public class AttachmentsDto
    {
        public string Name { get; set; }
        public int AttachType { get; set; }
        public List<IFormFile> Photos { get; set; }
        public string? CreatedBy { get; set; }
        public string? ModifiedBy { get; set; }
        public DateTime CreatedOn { get; set; }
        public DateTime? ModifiedOn { get; set; }
        public bool IsDeleted { get; set; } = false;
    }

the photos input #Photos file passed null, Although input #Name pass the value

  <script>
        $("#addRow").click(function ()
        {
        var rowCount = parseInt($("#total").val());
        rowCount++;
        $("#total").val(rowCount);
        console.log(rowCount);
        var html = '';
        html += '<div id="inputRow">';
        html += '<input type="text" name="DynamicNoteList[' + (rowCount - 1) + '].Note"  class="form-control " />';
        html += '</br>';
        html += '<input type="file" id="Photos" name="Attachments[' + (rowCount - 1) + '].Photos" multiple="multiple"  class="form-control custom-file-input"/>';
        html += '<input type="text" name="Attachments[' + (rowCount - 1) + '].Name" id="Name " class="form-control"/>';
    
        //add more inputs here...
        html += '<button id="removeRow" type="button" class="btn btn-danger">Delete</button>';
        html += '</div>';
    
        $('#newRow').append(html);
        });
        $(document).on('click', '#removeRow', function ()
        {
        var rowCount = parseInt($("#total").val());
        rowCount--;
        $("#total").val(rowCount);
        $(this).closest('#inputRow').remove();
        });
    
    </script>