I encountered some problems while integrating Dropzone with django so I don’t want my fellow programmers to encounter the same problem.
For this configuration, bootstrap, jquery and Dropzone’s js and css is used. For Design purpose, stack can be chosen as per requirements. But Dropzone’s js is mandatory.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/min/dropzone.min.js"
integrity="sha512-9WciDs0XP20sojTJ9E7mChDXy6pcO0qHpwbEJID1YVavz2H6QBz5eLoDD8lseZOb2yGT8xDNIV7HIe1ZbuiDWg=="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/dropzone.min.css"
integrity="sha512-3g+prZHHfmnvE1HBLwUnVuunaPOob7dpksI7/v6UnF/rnKGwHf/GdEq9K7iEN7qTtW+S0iivTcGpeTBqqB04wA=="
crossorigin="anonymous"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
</head>
<body>
<div id="dropzone">
<form id="dropZoneForm" class="dropzone needsclick dz-clickable" action="#" method="post"
enctype="multipart/form-data">
{% csrf_token %}
<input type="hidden" name="abc" value="i am hidden value">
<div class="fallback">
<input name="file" type="file" multiple/>
</div>
</form>
<input type="submit" id="submit-all" value="Upload" class="custom-button" style="float: right">
</div>
</div>
</body>
<script type="text/javascript">
final_url = "http://128.199.22.231:8006/get_outgoing_payment_info";
Dropzone.options.dropZoneForm = {
url: final_url,
addRemoveLinks: true,
method: "POST",
params: 'file_upload',
maxFilesize: 256 * 4 * 2,
dictFileTooBig: "File is too big.",
autoProcessQueue: false,
acceptedFiles: '.png, .jpg,.gif,.bmp,.jpeg',
uploadMultiple: true,
dictDefaultMessage: "Drag and Drop files here to upload",
parallelUploads: 10,
maxFiles: 12,
clickable: true,
headers: {
'Access-Control-Request-Headers':'authorization,cache-control,x-requested-with',
'Access-Control-Allow-Origin':'*'
// remove Cache-Control and X-Requested-With
// to be sent along with the request
},
init: function () {
mydropzone = this;
$("#submit-all").click(function (evt) {
evt.preventDefault();
evt.stopPropagation();
var paymentNotes = $("#paymentNotes").val();
mydropzone.autoProcessQueue = true;
mydropzone.processQueue();
});
mydropzone.on('sending', function (file, xhr, formData) {
var notes = $("#paymentNotes").val();
var outgoingManualPaymentID = $("#outgoingManualPaymentID").val();
console.log('notes from sending' + notes);
console.log('notes from sending' + notes);
formData.append('paymentNotes', notes);
formData.append('outgoingManualPaymentID', outgoingManualPaymentID);
});
},
success: function f(response) {
console.log('response' + response);
$('.dz-remove').hide();
},
};
</script>
</html>
Your url should handle the files uploaded with dropzone. The code to do so is given below.
from django.core.files.storage import FileSystemStorage
def dropzoneuploads(request):
if request.method == 'POST':
files = [request.FILES.get('file[%d]' % i)
for i in range(0, len(request.FILES))]
#inputs obtained from form are grabbed here, similarly other data can be gathered
abc = request.POST['abc']
# location where you want to upload your files
folder = 'my_folder'
fs = FileSystemStorage(location=folder)
for f in files:
filename = fs.save(f.name, f)
data = {'status': 'success'}
response = JsonResponse(data)
return response
After the files are stored, success status is sent which triggers the success function of dropzone. Here, we have removed cross button in success of dropzone uploads.
Related Posts
Dropzone with Django
1st November 2020
by admin
Flask or Django ? (Which one to start first ?)
18th September 2020
by admin