how connect js with python in django project

I want to receive Excel from the user with an html page and transfer it to Python using the ajaxc algorithm in js So it should be stored in a specific folder and processed by Excel using Python libraries and so on Give the user a new Excel download link in the form of a rental link

`from django.http import JsonResponse from django.views.decorators.csrf import csrf_exempt import os

@csrf_exempt def process_excel(request): if request.method == ‘POST’: excel_file = request.FILES.get(‘excelFile’)

from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
import os


@csrf_exempt
def process_excel(request):
    if request.method == 'POST':
        excel_file = request.FILES.get('excelFile')

        if excel_file:
            # Define the path to save the uploaded excel file
            save_path = 'D:/updatepj/'
            file_path = os.path.join(save_path, excel_file.name)

            # Save the uploaded excel file
            with open(file_path, 'wb') as destination:
                for chunk in excel_file.chunks():
                    destination.write(chunk)

            # Create a response message
            response_data = {'message': 'Excel file uploaded successfully.'}
            return JsonResponse(response_data)
        else:
            response_data = {'message': 'No file was uploaded.'}
            return JsonResponse(response_data, status=400)

    response_data = {'message': 'Invalid request method.'}
    return JsonResponse(response_data, status=405)


# Create your views here.
class DashboardView(LoginRequiredMixin, TemplateView):
    pass


dashboard_view = DashboardView.as_view(template_name="dashboards/index.html")
dashboard_crm_view = DashboardView.as_view(template_name="dashboards/dashboard-crm.html")
process_excel_view = DashboardView.as_view(template_name="dashboards/process_excel.htm")
{% extends "partials/base.html" %}
{% load static %}
{% block title %}Dashboard{% endblock title %}
{% block extra_css %}
    <!-- jsvectormap css -->
    <link href="{% static 'libs/jsvectormap/dist/css/jsvectormap.min.css'%}" rel="stylesheet" type="text/css" />

    <!--Swiper slider css-->
    <link href="{% static 'libs/swiper/swiper-bundle.min.css'%}" rel="stylesheet" type="text/css" />
{% endblock extra_css %}

{% block content %}
        <!-- ============================================================== -->
        <!-- Start right Content here -->
        <!-- ============================================================== -->
        <div class="main-content">

            <div class="page-content">
                <div class="container-fluid">
                    {% block pagetitle %}
                    {% include "partials/page-title.html" with pagetitle="Dashboards" title="Dashboard" %}
                    {% endblock pagetitle %}

                </div>
                <!-- container-fluid -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Upload Excel</title>
    <style>
        .custom-button {
            background-color: #007bff;
            color: #fff;
            border: none;
            padding: 0.5rem 1rem;
            cursor: pointer;
        }

        .custom-button:hover {
            background-color: #0056b3;
        }

        .my-2 {
            margin: 0.5rem 0;
        }
    </style>
</head>
     <select class="form-select mb-3" aria-label="Default select example">
        <option selected>Update BP Records</option>
        <option value="1">Create BP Records</option>
        <option value="2">Update Users</option>
        <option value="3">Create Users</option>
        <option value="3">reate User</option>
        <option value="3">Update Workflow (!!Under development!!)</option>
        <option value="3">ttach Files (Early access)</option>
        <option value="3">Revision Excel Organizer (!!Under development!!)</option>
        </select>
    <div>
        <label for="basiInput" class="form-label">Config. Sheet Name</label>
       <!-- Form Control Default -->
        <input class="form-control" type="text" placeholder="">
        </div>
                         <div>
        <label for="basiInput" class="form-label">Data Sheet Name</label>
       <!-- Form Control Default -->
        <input class="form-control" type="text" placeholder="">

<body>
    <div class="my-2">
        <label for="formFile" class="form-label">Default file input example</label>
        <input class="form-control" type="file" id="formFile">
    </div>
    <button type="button" id="uploadButton" class="custom-button">Upload Excel</button>
    <div id="uploadStatus" class="my-2"></div>

    <script>
        document.getElementById('uploadButton').addEventListener('click', function() {
            var formData = new FormData();
            var fileInput = document.getElementById('formFile');
            var file = fileInput.files[0];

            if (!file) {
                alert('Please select a file.');
                return;
            }

            formData.append('excelFile', file);

            fetch("{% url 'dashboards:process_excel' %}", {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRFToken': '{{ csrf_token }}',
                }
            })
            .then(response => response.json())
            .then(data => {
                document.getElementById('uploadStatus').innerText = data.message;
            })
            .catch(error => {
                console.error('Error:', error);
            });
        });
    </script>
</body>
</html>







            </div>
            <!-- End Page-content -->
            {% block footer %}
            {% include "partials/footer.html" %}
            {% endblock footer %}
        </div>
        <!-- end main content-->
{% endblock content %}

{% block extra_js %}
<!-- apexcharts -->
<script src="{% static 'libs/apexcharts/dist/apexcharts.min.js'%}"></script>

<!-- Vector map-->
<script src="{% static 'libs/jsvectormap/dist/js/jsvectormap.min.js'%}"></script>
<script src="{% static 'libs/jsvectormap/dist/maps/world-merc.js'%}"></script>

<!--Swiper slider js-->
<script src="{% static 'libs/swiper/swiper-bundle.min.js'%}"></script>

<!-- Dashboard init -->
<script src="{% static 'js/pages/dashboard-ecommerce.init.js'%}"></script>
{% endblock extra_js %}
from django.urls import path
from dashboards.views import (
    dashboard_crm_view,
    process_excel_view,
    dashboard_view
)

app_name = 'dashboards'

urlpatterns = [
    path('',view =dashboard_view,name="dashboard"),
    path('dashboard-crm', view =dashboard_crm_view,name="dashboard_crm"),
    path('process_excel', view=process_excel_view,name="process_excel")

]