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

deforder(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:
        passif 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:
                passexcept MultiValueDictKeyError:
            pass
        order_store = Order(product_img=TemplateValue)

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