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">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

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

<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">
    $('#form').fileupload({
        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);
            $('#progress').val(progress);
            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) {
            console.log(data.result.name);
        },
        fail: function () {
            console.log('Failed')
        }
    });
</script>

</body>
</html>

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