Display Images In Select Option For Selection -Django Python

I am working on a PRoject and I am stuck on order page. Here, I want to display list of product images in options tag so that a user can select one image from all or can upload an

Solution 1:

I have slightly modified my html template with jquery and changed views a little bit and now it is working for me.

order.html

{% extends 'user/layout/userMaster.html' %}
{% block title %}Order{% endblock %}

{% block css %}
.t {
display: none;
}

img:hover {
opacity:0.8;
cursor: pointer;
}

img:active {
opacity:0.5;
cursor: pointer;
}

input[type=radio]:checked + label > img {
border: 20px solid rgb(228, 207, 94);
}

#dropdown{
height: 50px;
width: 50%;
font-size: 20px;
margin-left: 10px;
margin-top: 3px;
}

{% endblock %}

{% block header %}
{% endblock %}
{% block main %}
<div class="container">
    <div>
        <div class="row rounded mx-auto d-block d-flex justify-content-center">
            <button class="btn btn-secondary my-2 mr-1">Custom</button>
            <button class="btn btn-secondary my-2 ml-1">Package</button>
        </div>
        <div class="row">
            <div class="col-4">
                <div class="card border border-secondary">
                    <div class="card body mx-2 mt-4 mb-2">
                        {% for product in products %}
                        <a id="{{ product.prod_ID }}" class="card-header" style="font-size:5vw;color:black;"
                           href="{% url 'user-order' product.prod_ID  %}">
                            <h5 class="h5">{{ product.prod_ID }}. {{ product.prod_Name }}</h5></a>
                        <div class="dropdown-divider"></div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            <div class="col-8">
                <form method="POST" enctype="multipart/form-data">
                    <input type="hidden" id="templateValue" name="templateValue" value=""/>
                    {% csrf_token %}
                             <div class="form-group">
                                <div class="form-group row mx-2">
                                    <label for="ImageTemplateProductsList"
                                           class="form-control-label font-weight-bold card-header col-4 ml-4"
                                           style="background-color:#e3e4e6"><h5>Image Template : </h5></label>
                                    <div id="ImageTemplateProductsList" class="mx-2">
                                        <input id="Upload" type="radio" name="ImageSelection"
                                               class="templateSelection"/> Upload an
                                        Image
                                        <div class="type">
                                            <input type="file" name="image"
                                                   class='btn btn-outline-secondary my-2 SelectedImage'>
                                        </div>
                                        <br>
                                        <input type="radio" id="Select" name="ImageSelection" class="templateSelection"
                                        /> Select
                                        From Templates
                                        <div class="type">
                                            {% for IT in ImageTemplateProductsList %}
                                            <input type="radio" name="image2" id="{{IT}}"
                                                   value="{{IT}}" class="SelectedImage t"/>
                                            <label for="{{IT}}">
                                                <img src="{{IT.url}}" style="width: 20vw;
                                                                             height: 20vw;
                                                                             padding: 2vw;"/>
                                            </label>
                                            <br>
                                            {% endfor %}
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="row rounded mx-auto d-block d-flex justify-content-center">
                        <button type="submit" class="btn btn-success my-2">Place Order</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block js %}

$("document").ready(function(){
$(".type").hide();
$("input:radio").on('change', function() {
$(".type").hide();
$(this).next("div").show();
});
$("#templateValue").val('');
$(".templateSelection").on('change', function(){
$("#templateValue").val('');
$("#templateValue").val($(this).attr('id'));
console.log($("#templateValue").val());
});
});


{% endblock %}

I have used hidden field to check whether user is trying to upload the image or select tha image and according to that I am taking the decision that what should I do:

views.py

def order(request, id):
    products = Product.objects.all()
    ImageTemplateProductsList = []

    try:
        ImageTemplateProductsMap = ImageTemplateProductMapping.objects.filter(prod_id=id)
        ImageTemplateProductsList = [data.temp_id.temp_img for data in
                                     ImageTemplateProductsMap]
    except AttributeError:
        pass

    if request.method == 'POST':
        try:
            if request.POST['templateValue'] == 'Upload':
                if 'image' in request.FILES:
                    Template_Value1 = request.FILES['image']

                    fs = FileSystemStorage()
                    fs.save(Template_Value1.name, Template_Value1)
                    TemplateValue = Template_Value1.name
            elif request.POST['templateValue'] == 'Select':
                TemplateValue = request.POST['image2']
            else:
                pass
        except MultiValueDictKeyError:
            pass
        order_store = Order(product_img=TemplateValue)

        order_store.save()
    context = {'products': products,
               "ImageTemplateProductsList": ImageTemplateProductsList
               }
    return render(request, 'user/order.html', context)