Question

I want to create a django app that can upload and display images. However I am having some trouble doing this as it is not working properly. What happens is when I try to upload the image from my form, it does not get displayed in my list. So I seem to be having problems displaying my images.

Here is what I have done so far.

EDIT – code is updated: I have done some changes that need to be made. Now there is still a problem. Instead of printing out the image, my program is printing the directory of where the image is saved.

So for example, {{comment.photo}} will print out the path C:/Users/AQUIL/Desktop/myproject/images/P1000992.JPG. But I want to see the image on the screen. How do I print out the image to the screen?

models.py

class Comment(models.Model):
    name = models.CharField(max_length = 40)
    datetime = models.DateTimeField(default=datetime.now)
    photo = models.ImageField(upload_to='C:/Users/AQUIL/Desktop/myproject/images', blank=True, null=True)
    note = models.TextField()
    def __unicode__(self):
        return unicode(self.name)

Views.py

def home(request):
    comments = None
    try:
        comments = Comment.objects.order_by('-datetime')
    except:
        return HttpResponseNotFound()
    return render_to_response('home.html', {'comments':comments}, context_instance=RequestContext(request)) 


def add_notes(request):
    comments = Comment.objects.all()
    if request.method == 'POST':
        form = CommentForm(request.POST or None, request.FILES)
        if form.is_valid():
            comments.datetime = datetime.now()
            form.save(True)
            return HttpResponseRedirect(reverse(home))
    else:
        form = CommentForm()
    return render_to_response('form.html', {'form':form,'comments':comments}, context_instance = RequestContext(request))

forms.py

class CommentForm(forms.ModelForm):
    class Meta:
        model = Comment
    exclude =('datetime')

home.html

{% extends "base.html" %}

{% block content %}

<H2>List of Comments</H2>
<div style="overflow:auto;padding: 10px; border:1px solid black; height:150px; width:700px;">

{% for comment in comments %}
    {{comment.photo}}<br/>
    <b>Posted by: {{ comment.name }} Date: {{ comment.datetime.date }} Time: {{comment.datetime.time}}</b><br/>
    <div style="font-size:125%">{{ comment.note }}</div><br/>   
{% endfor %}
</div>
{% endblock %}

This is a lot of information, but I hope this helps.
form.html

{% extends "base.html" %}
{% block content %}

<h3>Add Notes</h3>  
    <form  enctype="multipart/form-data"  action="" method="POST">{% csrf_token %}
        <table>
        {{form.as_table}}<br/>
        </table>
         <input type="submit" value="Save" STYLE="background-color:#E8E8E8; color:#181818 "/>
    </form>
{% endblock %}

Answer 1

read this in the docs.

also, can we see the html code of the form? btw, if you do exactly like in the docs, you’ll work it out… the enctype is fundamental!