5/23/2021 how to upload upload image in django by user – python Django web development tutorial | Blearningclub

BLEARNINGCLUB
python Django web development programming tutorial and technical blogs

blearningclub.com Printed on May 23, 2021

HOW TO UPLOAD UPLOAD IMAGE IN DJANGO BY

USER
September 22, 2020
Categories: Django
Tags: django, django beginner tutorial

https://blearningclub.com/?print-my-blog=1&post-type=post&statuses%5B0%5D=publish&rendering_wait=0&columns=1&font_size=normal&image_size=medium&links=include&show_site_title=1&show… 1/9
5/23/2021 how to upload upload image in django by user – python Django web development tutorial | Blearningclub

How to upload image in django by userstep by step tutorial . Also you get know how to upload image when user login in django .
upload image is a great concept for any beginners , in this tutorial you will know lot of concept

At rst create django project and django app (e.g.: app name image )

django-admin startproject project .

django-admin startapp image

Now go to settings.py inside project installed the app image:

INSTALLED_APPS =

Now go to urls.py inside the project and include the url for app :

from django.urls import path,include

urlpatterns =

Now go to models.py in image app and edit this:

from django.db import models

https://blearningclub.com/?print-my-blog=1&post-type=post&statuses%5B0%5D=publish&rendering_wait=0&columns=1&font_size=normal&image_size=medium&links=include&show_site_title=1&show… 2/9
5/23/2021 how to upload upload image in django by user – python Django web development tutorial | Blearningclub

# Create your models here.

class Image(models.Model):
caption=models.CharField(max_length=100)
image=models.ImageField(upload_to="img/%y")
def __str__(self):
return self.caption

Now go to admin.py and register the model :

from django.contrib import admin

# Register your models here.

https://blearningclub.com/?print-my-blog=1&post-type=post&statuses%5B0%5D=publish&rendering_wait=0&columns=1&font_size=normal&image_size=medium&links=include&show_site_title=1&show… 3/9
5/23/2021 how to upload upload image in django by user – python Django web development tutorial | Blearningclub

from .models import Image

admin.site.register(Image)

Now create form.py inside image app folder :

from django import forms

from .models import Image

class ImageForm(forms.ModelForm):
class Meta:
model=Image
fields=("caption","image")

Now go to views.py and edit it:

from django.shortcuts import render,redirect

from .form import ImageForm
from .models import Image

# Create your views here.

def index(request):

https://blearningclub.com/?print-my-blog=1&post-type=post&statuses%5B0%5D=publish&rendering_wait=0&columns=1&font_size=normal&image_size=medium&links=include&show_site_title=1&show… 4/9
5/23/2021 how to upload upload image in django by user – python Django web development tutorial | Blearningclub

if request.method == "POST":
form=ImageForm(data=request.POST,files=request.FILES)
if form.is_valid():
form.save()
obj=form.instance
return render(request,"index.html",{"obj":obj})
else:
form=ImageForm()
img=Image.objects.all()
return render(request,"index.html",{"img":img,"form":form})

Now go to image app folder and create folder name “templates” & now create index.html :

First copy the bootstrap starter templates .

<h1>Hello, world!</h1>
<div class="container">

https://blearningclub.com/?print-my-blog=1&post-type=post&statuses%5B0%5D=publish&rendering_wait=0&columns=1&font_size=normal&image_size=medium&links=include&show_site_title=1&show… 5/9
5/23/2021 how to upload upload image in django by user – python Django web development tutorial | Blearningclub

<form action="." method="post" enctype="multipart/form-data">

{% csrf_token %}
{{form.as_p}}

<button type="submit" class="btn btn-lg btn-success">Upload</button>

</form>

{% if obj %}
<h3>Succesfully uploaded : {{img_obj.caption}}</h3>
<img src="{{ obj.image.url}}" alt="image" class="img-thumbnail" >
{% endif %}
<hr>

{% for x in img %}
{% if forloop.first %}<div class="row ">{% endif %}
<div class="col-lg-4 col-md-4 col-12" >
<div class="text-center mt-2">
<img src="{{x.image.url}}" height="70%" width="70%" class="img-thumbnail" alt="...">
<h2 class="text-center" >{{x.caption}}</h2></div>
</div>
{% if forloop.counter|divisibleby:3 %}
</div>
<div class=row>{% endif %}

https://blearningclub.com/?print-my-blog=1&post-type=post&statuses%5B0%5D=publish&rendering_wait=0&columns=1&font_size=normal&image_size=medium&links=include&show_site_title=1&show… 6/9
5/23/2021 how to upload upload image in django by user – python Django web development tutorial | Blearningclub

{% if forloop.last %}</div>{% endif %}

{% endfor %}

</div>

Now create le urls.py inside image app and edit this :

from django.urls import path

from . import views

urlpatterns =

NOW IMPORTANT THINGS : ADD MEDIA ROOT TO THE URL :

Now go to setting.py inside project and add media root and media url:

STATIC_URL = '/static/'
MEDIA_URL="/media/"
MEDIA_ROOT=os.path.join(BASE_DIR,"media/")

https://blearningclub.com/?print-my-blog=1&post-type=post&statuses%5B0%5D=publish&rendering_wait=0&columns=1&font_size=normal&image_size=medium&links=include&show_site_title=1&show… 7/9
5/23/2021 how to upload upload image in django by user – python Django web development tutorial | Blearningclub

So now go to urls.py inside the project and edit this :

from django.contrib import admin

from django.urls import path,include
from django.conf import settings
from django.conf.urls.static import static

urlpatterns =

if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)

If you do not do this then it will not work :

nally it look like this :

https://blearningclub.com/?print-my-blog=1&post-type=post&statuses%5B0%5D=publish&rendering_wait=0&columns=1&font_size=normal&image_size=medium&links=include&show_site_title=1&show… 8/9
5/23/2021 how to upload upload image in django by user – python Django web development tutorial | Blearningclub

So i think you have an idea how to upload image by user .For any query you can contact us by providing proper details .

https://blearningclub.com/?print-my-blog=1&post-type=post&statuses%5B0%5D=publish&rendering_wait=0&columns=1&font_size=normal&image_size=medium&links=include&show_site_title=1&show… 9/9