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

Question

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.

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
}