CODEWITHSUNDEEP
pythondjangodjango-modelsdjango-formsdjango-views
MSY
MSY

Reputation: 23

How to upload and display the image by using model form in Django?

I've been trying to upload and display the image but it doesn't show the image.

In models.py

class upload(models.Model):
    Comments = models.CharField(max_length=200)
    img = models.ImageField(upload_to='images/',blank=True)

forms.py

class upl(ModelForm):
   class Meta:
      model= upload
      fields= ['Comments','img']

views.py

def home(request):  
   form=upl()
   if request.method=='POST':
       form = upl(request.POST, request.FILES)
       if form.is_valid():
           Comments = form.cleaned_data['Comments']
           img = form.cleaned_data['img']
           p=upload(Comments=Comments,img=img)
           p.save()
   return render(request,'home.html',{'form':form,'up':upload.objects.all(), })

in template

<form method="POST">
{% csrf_token %}
{{form.as_p}}
<br>
 <BUTTON TYPE ="SUBMIT">Submit</BUTTON><br>
<br>
</form>

{%for i in up %}
{{i.Comments}}
<img src ="{{i.img}}", alt="">
{%endfor%}

So this is showing comments but not image. I don't know why the image is not showing.

Upvotes: 0

Views: 2260

Answers (1)

Paul West
Paul West

Reputation: 111

OK. There are a few things going on here.

The models.py and forms.py are fine.

The views.py needs to look like this. I have commented out your code and added a single line. Basically, I think what is going wrong here is that you are instantiating the model 'upload' and saving, this only saves the 'Comments' field and does not handle the file. Executing the .save() method on the form object resolves this issue.

def imagetest(request):  
   form=upl()
   if request.method=='POST':

       form = upl(request.POST, request.FILES)
       if form.is_valid():
            form.save()
#           Comments = form.cleaned_data['Comments']
#           img = form.cleaned_data['img']
#           p=upload(Comments=Comments,img=img)
#           p.save()

   return render(request,'home.html',{'form':form,'up':upload.objects.all(), })

Now on to displaying the images. Firstly, you will need to modify your settings to recognise Media files. Modify your settings.py file to define values for the media file location and presentation.

Add these lines to the bottom. 

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'mediafiles')

You can, of course, pick any location you like for these files. See this link for more information on MEDIA_URL and MEDIA_ROOT

For the views.py you need to make 2 changes.

Add enctype="multipart/form-data" to the form statement. This is required to ensure the File object is submitted along with the POST.

Change {{i.img}} to {{i.img.url}} Adding the .url method outputs the correct relative url for the image (in simple terms in pre-appends the Media Root value.

<form enctype="multipart/form-data" method="POST">
{% csrf_token %}
{{form.as_p}}
<br>
 <BUTTON TYPE ="SUBMIT">Submit</BUTTON><br>
<br>
</form>

{%for i in up %}
{{i.Comments}}
<img src ="{{i.img.url}}", alt="">
{%endfor%}

Assuming you are running this using the internal development server you will need to make the following changes to your urls.py.

Add this entries to the top of the file.

from django.conf import settings
from django.conf.urls.static import static

Add a pattern to allow the server to find the image files. ... + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

urlpatterns = [
    path('', views.home, name="home"),
]+ static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Hope this helps. Happy to do follow up in necessary.

Upvotes: 1

Related Questions