I have the following django models / forms / views / html setup.
So I am rendering the InputFileForm in the html and the user should select from dropdown list a face_file that is saved in the Face model (preloaded via fixtures). I would like to have the face_file images to be rendered in the dropdown (alternatively a radio select would be fine as well) instead of the image str names - as it currently looks like the following:
Image of current dropdown
So in short: I would like to have an image rendered in the dropdown instead of the "Face 1", "Face 2",...
Thanks in advance for your help!
class Face(models.Model):
face_id = models.AutoField(primary_key=True)
name = models.CharField(max_length=64)
face_file = models.ImageField(upload_to='../media/faces', blank=True, null=True)
def __str__(self):
return self.name
class InputFile(models.Model):
input_id = models.AutoField(primary_key=True)
input_flatlay_file = models.ImageField(upload_to='../media/flatlays', blank=True, null=True)
input_face_file = models.ForeignKey(Face, null=True, blank=True, on_delete=models.CASCADE, related_name="inputs_using_this_face")
input_user = models.ForeignKey(settings.AUTH_USER_MODEL, null=True, blank=True, on_delete=models.CASCADE, related_name="user_inputs")
class Prediction(models.Model):
prediction_id = models.AutoField(primary_key=True)
prediction_inputs = models.ForeignKey(InputFile, null=True, blank=True, on_delete=models.CASCADE, related_name="prediction_inputs")
output_lookbook_file = models.ImageField(upload_to='../media/lookbooks', blank=True, null=True)
prediction_user = models.ForeignKey(settings.AUTH_USER_MODEL, null=True, blank=True, on_delete=models.CASCADE, related_name="user_predictions")
I have a ModelForm for InputFile:
class MyModelChoiceField(ModelChoiceField):
def label_from_instance(self, obj):
return mark_safe('<img src="%s">' %obj.face_file.url)
class InputFileForm(forms.ModelForm):
class Meta:
model = InputFile
fields = ['input_flatlay_file','input_face_file']
widgets = {
'input_face_file': MyModelChoiceField(queryset=Face.objects.all()),
}
In my views.py:
def prediction(request):
form=forms.InputFileForm()
if request.method == 'POST':
form = forms.InputFileForm(request.POST or None, request.FILES or None)
if form.is_valid():
new_input = form.save(commit=False)
new_input.input_user = request.user
new_input.save()
output_lookbook_file = util.prediction(new_input.input_flatlay_file, new_input.input_face_file.face_file)
new_prediction = Prediction(output_lookbook_file = output_lookbook_file, prediction_user = request.user, prediction_inputs=new_input)
new_prediction.save()
return render(request, "modelgan/prediction.html", {"form": form,
"new_input":new_input, "new_prediction": new_prediction })
else:
return render(request, "modelgan/prediction.html", {"form": form })
return render(request, "modelgan/prediction.html", {"form": form })
In my html I am rendering the ModelForm as following:
{% if user.is_authenticated %}
<form action="{% url 'prediction' %}" method="post" enctype="multipart/form-data">
{% csrf_token %}
<form action="" method="POST">
{% csrf_token %}
{{ form.as_table }}
<input type="submit" value="Generate lookbook image">
</form>
</form>
question from:
https://stackoverflow.com/questions/65870673/rendering-images-in-django-modelform-instead-of-str-representation