Filei upload Javascript

[boosh]

Can anyone help me with the frontend code to upload a file please? I can't find any examples anywhere. I've tried various permutations, e.g. below, but none of them work:

        var fileInput = document.getElementById('csv_file');
        var file = fileInput.files[0];

        var formData = new FormData();
        formData.append('file', file);

        fetch("{% url 'api-1.0.0:csv_upload' %}", {
            method: 'POST',
            headers: {
                'Content-Type': 'multipart/form-data',
                'X-CSRFToken': csrftoken,
            },
            body: JSON.stringify({
                'file': formData,
            }),
        })

And

@router.post("/upload")
def csv_upload(request, file: UploadedFile = File[UploadedFile]):
    data = file.read()
    return {'name': file.name, 'len': len(data)}

Fails with django.http.multipartparser.MultiPartParserError: Invalid boundary in multipart: None.

[boosh]

This works:

var formData = new FormData();
        formData.append('file', file);

        fetch("{% url 'api-1.0.0:csv_upload' %}", {
            method: 'POST',
            headers: {
                'X-CSRFToken': csrftoken,
            },
            body: formData
        })
            .then(response => response.json())
            .then(data => {
                updateTextareas(data);
                event.target.disabled = false;
            })
            .catch(error => {
                console.error('Error fetching data:', error);
                event.target.disabled = false;
            });