Django + Dropzone Multiple File Upload

Django + Dropzone Multiple File Upload

Simple Multiple File Upload

form.py

class FileFieldForm(forms.Form):
file = forms.FileField(widget=forms.ClearableFileInput(attrs={'multiple': True}))

index.html

{% load static %}
<link rel="stylesheet" href="{% static '/dropzone/dropzone.min.css' %}">
<script src="{% static '/dropzone/jquery3.2.1.min.js' %}"></script>
<script src="{% static '/dropzone/dropzone.min.js' %}"></script>
<script src="{% static '/dropzone/dropzone.tr.js' %}"></script>

<form method="post" enctype="multipart/form-data" class="dropzone clsbox" id="MultiFileUpload">
    <div class="fallback">
        <input id="file" name="file" type="file" multiple="multiple"/>
        <input type="submit" value="Upload"/>
    </div>
</form>

<script>

    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie != '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) == (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    var csrftoken = getCookie('csrftoken');
    Dropzone.autoDiscover = false;
    $('#MultiFileUpload').dropzone({
        url: "/fileupload/",
        crossDomain: false,
        paramName: "file",
        parallelUploads: 5,
        autoProcessQueue: true,
        filesizeBase: 1024,
        maxFilesize: 10000,
        dictRemoveFileConfirmation: null,
        init: function () {
            this.on("uploadprogress", function (file, progress, bytesSent) {
                progress = bytesSent / file.size * 100;
                console.log(filesizecalculation(bytesSent))
            });
            this.on("maxfilesexceeded", function (data) {
                var res = eval('(' + data.xhr.responseText + ')');
            });
            this.on("addedfile", function (file) {
                var removeButton = Dropzone.createElement("<button data-dz-remove " +
                    "class='del_thumbnail btn btn-default'><span class='glyphicon glyphicon-trash'></span> Sil</button>");
                var _this = this;
                removeButton.addEventListener("click", function (e) {
                    e.preventDefault();
                    e.stopPropagation();
                    _this.removeFile(file);
                });
                file.previewElement.appendChild(removeButton);
            });
            this.on("error", function (file, message) {

                console.log(message);
                this.removeFile(file);
            });
            this.on('sending', function (file, xhr, formData) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken);
            });
        }
    });

    Dropzone.prototype.filesize = function (size) {
       filesizecalculation(size)
    };

    function filesizecalculation(size) {
        if (size < 1024 * 1024) {
            return "<strong>" + (Math.round(Math.round(size / 1024) * 10) / 10) + " KB</strong>";
        } else if (size < 1024 * 1024 * 1024) {
            return "<strong>" + (Math.round((size / 1024 / 1024) * 10) / 10) + " MB</strong>";
        } else if (size < 1024 * 1024 * 1024 * 1024) {
            return "<strong>" + (Math.round((size / 1024 / 1024 / 1024) * 10) / 10) + " GB</strong>";
        }
    }
</script>

urls.py

from django.urls import path

from . import views

urlpatterns = [
    path('', views.index),
    path('fileupload/', views.FileFieldView.as_view()),
]

view.py

    from django.views.generic.edit import FormView
    from .forms import FileFieldForm
    class FileFieldView(FormView):
        form_class = FileFieldForm

        def post(self, request, *args, **kwargs):
            form_class = self.get_form_class()
            form = self.get_form(form_class)
            files = request.FILES.getlist('file')
            if form.is_valid():
                for f in files:
                    with open(Path(settings.MEDIA_ROOT + "/" + f.name).resolve(), 'wb+') as destination:
                        for chunk in f.chunks():
                            destination.write(chunk)

                return JsonResponse({'form': True})
            else:
                return JsonResponse({'form': False})

I used the above html template (using correct static files). The behavior is not as expected, it's not showing any progress-bar/previews ...even when I drag and drop a file, the file is just opened in browser (as if the file was opened in browser).
Am I missing something here?
Dropzone version is 5.7.0