После загрузки файла на страницу обновить содержимое без обновления страницы с помощью htmx (без ajax)

Здравствуйте, я новичок в HTMX и также как Ajax and JQuery. здесь я не знаком с htmx и у меня проблема с использованием htmx вместо ajax и Jquery. У меня есть выпадающее меню (опции как имена папок) при выборе опции файлы в папке отображаются как таблица там есть опция загрузки будет включена. используя опцию загрузки вы можете загружать файлы после нажатия кнопки загрузки файл загружается в выбранную папку и отображается в том же состоянии. здесь мне нужно показать загруженный файл в этой области отображения файлов без загрузки страницы (используя htmx) и без использования ajax & JQuery . как можно продолжить с этим требованием. Я прикрепил мои html, python и JS коды здесь с вопросом... Любая помощь будет оценена по достоинству...

script.js

// Getting name of the uploaded file
function fileInfo() {
    uploadFileName = document.getElementById('file').files[0].name;
}

function getDirectories() {
  let arrayOfThisRow = [];
  let inputFile = document.querySelector('input[type="file"]');
  let uploadBtn = document.querySelector('input[type="submit"]');
  inputFile.addEventListener("change", updateBtn);

  function updateBtn(e) {
    let tableTr = document.querySelectorAll("table#data tr");

    for (let i = 0; i < tableTr.length; i++) {
      let tableData = tableTr[i];
      let tableDataQuery = tableData.querySelector("td");
      if (tableDataQuery) {
        arrayOfThisRow.push(tableDataQuery.textContent);
      }
    }
    console.log(arrayOfThisRow);

    if (arrayOfThisRow.includes(uploadFileName)) {
      uploadBtn.disabled = true;
      alert("the File you trying to upload is already uploaded");
    } else if (!arrayOfThisRow) {
      uploadBtn.disabled = true;
    } else {
      uploadBtn.disabled = false;
    }
  }
}

let uploadForm=document.querySelector("#file-upload-form")
uploadForm.addEventListener('submit',(e)=>{
    e.preventDefault();
    uploadFile = document.getElementById("file").files[0];
    console.log(uploadFile);
    var formData = new FormData();
    formData.append("file",uploadFile);

    csrf_token = $('input[name="csrfmiddlewaretoken"]').val();
    formData.append("csrfmiddlewaretoken", csrf_token);

    $.ajax({
        url: "/uploadfiles",
        type: "POST",
        data: formData,
        success: function (response) {
            alert("File uploaded")
            document.getElementById("file").value=""
            // refreshDirectories();
        },
        cache: false,
        contentType: false,
        processData: false,
    });
});


// disables the upload button
try {
    document.addEventListener('alpine:init', () => {
        console.log('bank_id');  
        getDirectories()
    });
}
catch (ex) {
    console.log(ex)
}


let bankSelect = document.querySelector('.bank_dropdown');
let fileContainer = document.querySelector('.file_upload_container')

// hiding the upload part untill select the bank from the dropdown
bankSelect.addEventListener('change', (e) => {

        if (e.target.value == "") {
            fileContainer.style.display = "none";
        }
        else {
            fileContainer.style.display = "block";
        }
    })

views.py

import os
from urllib import response
from django.shortcuts import render,redirect
from django.views.decorators.csrf import csrf_exempt
from django.http import JsonResponse


# custom imports of dir,functions
from mis_main.settings import BASE_DIR
from .functions import get_modified_time
from .forms import UploadForm

root_path=BASE_DIR

def dropdownview(request):  
    banks = os.listdir(root_path)
    context={"banks":banks}
    return render(request, "index.html", context)


def displayfilesview(request):
    is_htmx_call=request.headers.get('hx-request') == 'true'
    banks = os.listdir(root_path)

    if is_htmx_call:
        print(is_htmx_call)
        files_list = []
        date_list  = []
        print(request.method)
        if request.method == 'GET':
            dd_value= request.GET.get('bank_id', None)
            request.session['bank_name'] = dd_value
            files_path=f"{root_path}/{dd_value}"
            for files in os.scandir(files_path):
                if files.is_file():
                    files_list.append(files.name)
                    date_list.append(get_modified_time(files))
            files_and_date_list = zip(files_list, date_list)
        return render(request, "display_files.html", {"banks":banks, "files_and_date_list":files_and_date_list})
    else:
        print("Not an HTMX call")
        os.abort(403)

@csrf_exempt
def uploadfilesview(request):
    banks = os.listdir(root_path)
    files_list = []
    date_list  = []
    form = UploadForm()
    
    if request.method == 'POST':
        bank_name = request.session['bank_name']
        files_path=f"{root_path}/{bank_name}/"
        for files in os.scandir(files_path):
            if files.is_file():
                files_list.append(files.name)
                date_list.append(get_modified_time(files))
        # files_and_date_list = zip(files_list, date_list)
        form = UploadForm(request.POST, request.FILES)
        if form.is_valid():
            uploadfile=request.FILES.get('file')
            with open(f"{root_path}\{bank_name}\{uploadfile}",'wb+') as destination:
                for chunk in uploadfile.chunks():
                    destination.write(chunk)
        return JsonResponse({"msg":"success"}) #"files_and_date_list":files_and_date_list, 
    return render(request, "index.html", {"banks":banks})

urls.py

from django.urls import path
from mis_app import views
from django.views.decorators.csrf import csrf_exempt

urlpatterns = [
    path("",views.dropdownview, name="dropdown"),
    path("displayfiles/",views.displayfilesview, name="displayfiles"),
    path("uploadfiles",csrf_exempt(views.uploadfilesview), name="uploadfiles"),
]

index.html

<div id="content">

  <div class="dropdown_container">
    <h2>Select a bank</h2>
    <form>
      <select class="bank_dropdown" id="bank_id" name="bank_id" hx-get="displayfiles" hx-target=".container_target"
        hx-trigger="change from:#bank_id" required>
        <option value="None" selected disabled hidden>select your bank</option>
        {% for bank in banks %}
        <option value="{{bank}}">{{bank}}</option>

        {% endfor %}
      </select>
    </form>
  </div>

  <p>{{error}}</p>
  <br>

  {% include "files_list.html" %}
  <hr>
  {% include "upload.html" %}

</div>
{% endblock %}

upload.html

<div class="file_upload_container" style="display:none;">
<form method="post" enctype='multipart/form-data' id="file-upload-form" > 
  <!-- action="{% url 'uploadfiles' %}" -->
    {% csrf_token %}
    <input type='file' name='file' id="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"  onchange="fileInfo()">
    <input type='submit' value='Upload' disabled>
  </form>

displayfiles.html

<div class="tableFixHead">
  <table id="data">
    <tr>{% for files,dates in files_and_date_list %}
      <td>{{files}}</td>
      <td>{{dates}}</td>
    </tr>
    {% endfor %}
</div>
<script src="static/js/script.js"></script>