Skip to content

Instantly share code, notes, and snippets.

@serdardurbaris
Last active September 21, 2021 08:29
  • Star 5 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save serdardurbaris/039c69fdab60a4c68e34314e2b1ccf35 to your computer and use it in GitHub Desktop.
Django + Dropzone Multiple File Upload
class FileFieldForm(forms.Form):
file = forms.FileField(widget=forms.ClearableFileInput(attrs={'multiple': True}))
{% 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>
from django.urls import path
from . import views
urlpatterns = [
path('', views.index),
path('fileupload/', views.FileFieldView.as_view()),
]
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})
@laxmikantG
Copy link

Where can I find dropzone.tr.js?

@abdullah-abid-dev
Copy link

abdullah-abid-dev commented Sep 2, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment