Uploading Files/Form with JQuery File Upload by blueimp

I am trying to understand how to use JQuery File Upload by blueimp. This is my test view with an Input from type file, a progress bar and a submit button. If I am selecting an Image in the Input, the value changes to undefined. What have I to do Upload this Image (and show the progression of the upload)?

HTML with JQuery:

{% load static %}

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">

<form id="form" method="POST" enctype="multipart/form-data">
    {% csrf_token %}
        <input type="file" accept="image/png, image/jpeg">
        <progress id="progress" value="0" max="100"></progress>
        <input type="submit">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="{% static 'blueimp/vendor/jquery.ui.widget.js' %}"></script>
<script src="{% static 'blueimp/jquery.fileupload.js' %}"></script>
<script src="{% static 'blueimp/jquery.iframe-transport.js' %}"></script>
<script type="text/javascript">
        url: '{% url 'upload' %}',
        sequentialUploads: true,
        dataType: 'json',
        type: 'POST',
        add: function (data) {
            console.log(data, data.result);
        progress: function (data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            if (progress === 50) {
                console.log('We made it half way...');
            } else if (progress === 100) {
                console.log('We made it...');
            } else {
                console.log(progress + '%');
        done: function(data) {
        fail: function () {


My Views:

def image_upload(request):
    return render(request, 'test/image_upload.html')

def upload(request):
    print('Files:', request.FILES)
    return HttpResponse(request.FILES)
Back to Top