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
