Input type file – filelist, is always empty in partial view that is inside a partial view

I was able to get the filelist when the element was in the view > partialview1. But i had to change the interface a little bit so, it got moved to, View > partialview1 > partialview2. After this change, the filelist is always 0. What am i doing wrong? can anyone explain why this behaviour? I also tried setting timeout to the attachmentpartial js but it made no difference. Kindly guide.

Index controller

    public class ProjectDashboardController : Controller
    {
        public IActionResult Index()
        {
            try
            {
                ProjectListModel resultSet = _context.tblProjects.where(x => x.appid == 1).ToList();
                return View(resultSet);
            }
            catch (Exception ex)
            {
                return null;
            }
        }
        

        
        //get project list
        public IActionResult GetProjDetails(int projectid)
        {
            ProjecDetModel resultSet = _context.tblProjDetails.where(x => x.projectid == projectid).ToList();
            return View("~/Views/ProjectDashboard/_projDetails.cshtml", resultSet); //return partial view with object
        }
        
        public IActionResult GetAttachments(int pid){
            ProjAtt att = _context.tblProjAttachments.where(x => x.projectid = pid).ToList();
            return View("~/Views/ProjectDashboard/_AttachmentPartial.cshtml", att); //return partial view with object
            
        }
        
    }

Index page/view

    @model ProjectListModel

    <div class="form-group" style="display:flex;">
        <partial name="~/Views/Projs/_projList.cshtml" model="@Model" /> @* project list table *@
    </div>

_projList.cshtml

    @model ProjectListModel
    
    @foreach(var item in Model)
    {
        <a asp-controller="ProjectDashboard" asp-action="GetProjDetails" asp-route-projectid="@item.ProjectID">
            <i class="bi bi-search" title="View project details" onclick="showLoadingSpinner();"></i> @* project details page *@
            @item.ProjectName
        </a>
    }

_projDetails.cshtml

    @model ProjecDetModel
    //other code
    <div class="partialContent" id="AttachmentsContainerDiv" data-url="/APP/ProjectDashboard/GetAttachments?pid=1">
    </div>

_AttachmentPartial.cshtml

    @model ProjAtt

    <label class="bi bi-paperclip" onchange="fileAttached(@Model.ProjectID);">
        <input type="file" id="uploadFile" style="display: none;" multiple>
    </label>
    @foreach(var item in Model)
    {
        @item.attName
    }

site.js

    function fileAttached(pjid) {
        var files = document.getElementById('uploadFile').files; //get the attached files                        
        //THIS IS NOT WORKING
        console.log(files);
    }

BUT THIS IS WORKING

_projDetails.cshtml

    @model ProjecDetModel

    <label class="bi bi-paperclip" onchange="fileAttached(@Model.ProjectID);">
        <input type="file" id="uploadFile" style="display: none;" multiple>
    </label>
    
    
    //other code
    <div class="partialContent" id="AttachmentsContainerDiv" data-url="/APP/ProjectDashboard/GetAttachments?pid=1">
    </div>

_AttachmentPartial.cshtml

    @model ProjAtt

    @foreach(var item in Model)
    {
        @item.attName
    }

site.js

    
    $(document).on('change', '#uploadFile', function () {
        var file = $(this)[0]; // note the [0] to return the DOMElement from the jQuery object

        fileAttached(file.files);
        console.log(file.files[0]);
    });


    function fileAttached(files) {
        console.log(files); //THIS IS WORKING
    }