Upload and Process csv asynchronosly with Django and Javascript

[formal elbow]

models.py

from django.db import models

# Create your models here.

class SigFile(models.Model):
    description = models.CharField(max_length=1000, blank = True)
    file = models.FileField(upload_to='files/')
    uploaded_at = models.DateTimeField(auto_now_add=True)```

forms.py

from django import forms
from .models import SigFile
import os

class UploadFileForm(forms.ModelForm):
    class Meta:
        model = SigFile
        fields = ('description', 'file')

views.py

from django.shortcuts import redirect, render
from django.http import HttpResponse, HttpResponseRedirect, JsonResponse
from django.views.generic.edit import FormView
from django.contrib import messages
from .forms import UploadFileForm
import csv, io
import pandas as pd

# Create your views here.

def index(request):
    return render(request, "index.html")
    # return HttpResponse("Hello, World!")


def upload_file(request):
    file_data = {}
    if request.method =="POST":
        form = UploadFileForm(request.POST, request.FILES)
        if form.is_valid():
            uploaded_file = request.FILES['file']
            # df = pd.read_csv(uploaded_file.file, sep = ',', index_col = 'Time,ms')
            # signal_ids = df.columns.tolist()
            # choice_list = [(id, id) for id in signal_ids]
            # handle_uploaded_file(request.FILES["file"])
            form.save()
            messages.success(request, "File uploaded successfully")
            # return redirect("index")
            # return render(request, 'index.html', {'choices': choice_list})
            file_data.update({'file_url': uploaded_file.model.url})
            return JsonResponse(file_data)
        messages.error(request, "Failed to upload file")
    form = UploadFileForm()
    return render(request, "index.html", {"form": form})

def process_column(request):
    if request.method == 'POST':
        column_name = request.POST.get('column_name')
        file_url = request.POST.get('file_url')
        df = pd.read_csv(file_url)
        column_data = df[column_name]
        return JsonResponse({'column_data': column_data.tolist()})
    else:
        return JsonResponse({'error': 'Invalid request method'})```

index.html

{% extends 'base.html' %}

{% block content %}

<div class="form-container">
    <form id="form" method="post" enctype="multipart/form-data">
        {% csrf_token %}
    <label for="sigfile">Upload file: </label>
    <input type="file" accept=".csv" name = "sigfile", id="sigfile">
    <button type="submit">Upload</button>
    </form>
    <div class="dropdown">
        <label for="signalSelect">Select Signal: </label>
        <select name="signal-dropdown" id="signalSelect">
            {% for choice in choices %}
                <option value="{{ choice.0 }}">{{ choice.1 }}</option>
            {% endfor %}
        </select>
    </div>
    
</div>

<div class="container">
    <div class="top-row">
    <div class="widget">Signal Widget</div>
    <div class="widget">Spectrogram Widget</div>
    </div>
    <div class="bottom-row">
    <div class="widget">Probability plot Widget</div>
    <div class="widget">Feature Importance Widget</div>
    </div>
</div>

{% endblock %}```

index.js

let form = document.getElementById('form');

function uploadFile() {
    let formData = new FormData()
    let file = document.getElementsByName('sigfile')[0].files[0];
    formData.append('sigfile', file, file.name);
    let xhr = new XMLHttpRequest();
    xhr.open("POST", '/upload/', true);
    xhr.onload = function () {
        if (xhr.status === 200) {
            let response = JSON.parse(xhr.responseText);
            let file_url = response.file_url;
            console.log(xhr.responseText);
            fetch(file_url).then(
                response => response.text()
            ).then(
                csvData => {
                    const df = Papa.parse(csvData).data;
                    const columnNames = df[0];

                    let select = document.getElementById('signalSelect');
                    columnNames.forEach(name => {
                        let option = document.createElement('option');
                        option.value = name;
                        option.text = name;
                        select.appendChild(option);
                    });```