Display users' images in Django - django

Question

I am learning Django and currently trying to make a simple website where users can post topics and stuff. What I want is only the uploaded images that belong to a certain topic to display when you open the topic. But I am so stuck at it now I can't get any image come up on the pages. I've tried many different things but none's worked so far. I can't get my head around how exactly the template should look like and how do I link it to the topic page...and my view is probably far from right but I've tried a lot of things and it's all got a bit messy...pretty much it's been 2 days of hassle and I will appreciate any directions
Thank you in advance
This is what i have:
models.py
class Image(models.Model):
"""images representation"""
image=models.ForeignKey(Topic, on_delete=models.CASCADE)
image=models.ImageField(upload_to= 'media/')
caption=models.CharField(max_length= 100)
uploaded_at=models.DateTimeField(auto_now_add=True)
views.py
def upload_image(request, topic_id):
"""Upload images"""
topic=Topic.objects.get(id=topic_id)
if request.method != 'POST':
# No data submitted; creaete a blank form
form=ImageForm()
else:
# Data submitted; Process data
form=ImageForm(request.POST, request.FILES)
if form.is_valid():
instance=form.save(commit=FALSE)
instance.topic=topic
instance.save()
return HttpResponseRedirect(reverse('the_horror:topic',
args=[topic_id]))
images=Image.objects.all()
context={'form':form, 'topic':topic, 'images':images}
return render(request, 'the_horror/topic.html', context)
upload_image.html
{% extends 'the_horror/base.html' %}
{% block content %}
{% if images %}
<ul>
{% for image in images %}
<li>
<a href="{{image.image.url}}">
<img source="{{image.image.url}}" alt="sth"></a>
</li>
{% endfor %}
</ul>
{% else %}
<p>No documents.</p>
{% endif %}
<form action="{% url 'upload_image' %}" method= "post" enctype= "multipart/form-data">
{% csrf_token %}
<input type="file" name="image"/>
<input type="submit" name="submit" value="Upload"/>
<button type="submit">name="upload photo"</button>
</form>
As i said i am not sure how to pass the images to the topic template
topic.html
{% extends 'the_horror/base.html' %}
{% block content %}
<p>Topic:{{topic}}</p>
<p>
edit topic
</p>
<p>Entries</p>
<p>
Add a new entry
</p>
<ul>
{% for entry in entries %}
<li>
<p>{{entry.date_added|date:'M d, Y H:i' }}</p>
<p>{{entry.text|linebreaks}}</p>
<p>
<image class= "Image" source={{>
</p>
<p>
edit entry
</p>
</li>
{% empty %}
<li>
There are no entries for this topic yet.
</li>
{% endfor %}
</ul>
{% endblock content %}
urls.py
path('upload_image/<topic_id>', views.upload_image, name= 'upload_image'),
# Single topic page

Answer 1

On your models.py you don't need to write media on your upload_to option, what you have to do is to add to your urls.py static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) here
urls.py
urlpatterns = [
...
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
On your upload_image.html why are you creating 2 input. Personally I use an input to take the image file
upload_image.html
...
<input name="image" type="file">
...
then in the views you started well but I will do as follow to store the image
views.py
def upload_image(request, topic_id):
...
imageObject = Image.objects.create()
image = request.FILES['image']
imageObject.image = image
...
Finally, you will get your image this way
topic.html
<img src="{{MEDIA_URL}}{{imageObject.image}}" alt="image">
Usually it works, I made several projects with this method or similar methods, if you still got error or question let me know