Bulk download of images rendered under mulitple categories in a single html page - django

Question

I have lot of images stored in a single folder in a S3 bucket. There are three categories(let's say A, B and C) and an image would fall into only one of the three categories. I am rendering all the images category wise on view-all.html page. What I am trying to do is add a separate download button beside the name of each category in the view-all.html. Upon clicking on a particular download button, the images present only under that category should be downloaded as a zip-file. Currently the download buttons are not working for any of the categories.
I have edited only the view-all.html and the views.py files. I searched a lot about this but didn't find any exact solution. I am not sure whether I have to add anything else in any other file. Please help me out. Thanks in advance.
view-all.html
{% extends "cms/base.html" %}
{% block title %}
View-all
{% endblock %}
{% block main %}
<style>
*{box-sizing: border-box;}
.wrapper{
overflow-x:scroll;
white-space: nowrap;
}
.container {
background: #ccc;
position: relative;
height: 50%;
display: inline-block;
}
img {
padding: 0;
display: block;
margin: 0 auto auto 0;
margin-left: auto;
margin-right: auto;
max-width: 100%;
}
.overlay {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 93%;
transition: .5s ease;
opacity:0;
color: white;
font-size: 20px;
padding: 20px;
text-align: center;
}
.container:hover > .overlay {
opacity: 1;
}
#media only screen and (max-width : 767px)
{
height: auto;
max-height: none;
}
</style>
{% for category in categories %}
<br /><h3>{{ category.name }}  <button name='downloadbtn' class="btn btn-primary" onclick='bulkdownload()'><i class="fa fa-download"></i> Download</button> </h3>
<div class="wrapper">
<div id="slider4" class="text-center">
{% for image in images %}
{% ifequal image.category category %}
<div class="container">
<img src="S3-url">
<br />
</div>
{% endifequal %}
{% endfor %}
</div>
</div>
{% endfor %}
{% endblock %}
views.py
#login_required
def bulkdownload(request):
if(request.GET.get('downloadbtn')):
images = Images.objects.all().filter(category = request.category.name)
if images:
categories = request.category.name
zip_subdir = '{:%B %d, %Y}'.format(datetime.now()) # name of the zip file to be downlaoded
zip_filename = '%s.zip' % zip_subdir
# Open StringIO to grab in-memory ZIP contents
s = io.StringIO.StringIO()
# The zip compressor
zf = zipfile.ZipFile(s, 'w')
for fpath in images:
# Calculate path for file in zip
fdir, fname = os.path.split(fpath)
zip_path = os.path.join(zip_subdir, fname)
# Add file, at correct path
zf.write(fpath, zip_path)
# Must close zip for all contents to be written
zf.close()
# Grab ZIP file from in-memory, make response with correct MIME-type
resp = HttpResponse(s.getvalue(), content_type = 'application/x-zip-compressed')
# ..and correct content-disposition
resp['Content-Disposition'] = 'attachment; filename=%s' % zip_filename
return resp

Answer 1

You can create forms and POST the data to download the images as:
{% for category in categories %}
<form method='POST' action="{% url 'your_url_name_for_view' %}">
<br /><h3>{{ category.name }}  
<input type="hidden" value="{{ category.id }}" name="category_id">
<input name='downloadbtn' class="btn btn-primary" type="submit"><i class="fa fa-download"></i> Download</h3>
</form>
<div class="wrapper">
<div id="slider4" class="text-center">
{% for image in images %}
{% ifequal image.category category %}
<div class="container">
<img src="S3-url">
<br />
</div>
{% endifequal %}
{% endfor %}
</div>
</div>
{% endfor %}
Now in your view you can check for the category as:
if request.method == 'POST':
category_id = request.POST.get('category_id')
images = Images.objects.all().filter(category_id = category_id)
Hope it helps.