How To Build Image Upload Full Stack Site Using python And Django

How To Build Image Upload Full Stack Site Using python And Django

Hanii's photo
·Sep 22, 2022·

4 min read

Subscribe to my newsletter and never miss my upcoming articles

Play this article

Table of contents

  • Set up
  • Home.html
  • post.html
  • Test app

Set up

First of all you have to install python and django in your Environment,Then You have To Create A superuser account Of Django

After All Setup you Have to Create Django Project Using This Cmd

django-admin startproject nameofyourproject .

now you have to start django server using this cmd

python runserver

Create a new django app by this cmd

python startapp nameofapp

in your root directory


now after opening setting in your editor look for installed apps and put the name of your django app name here like my app name is posts


now install pillow in your root folder

pip install pillow

create a model in your django app from django.db import models

 ##  Create your models here.
class Post (models.Model):
    title = models.CharField(max_length=200)
    image = models.ImageField(upload_to='images/')

    def __str__(self):
        return self.title

now make migrations using this cmd for the changing you've made

python makemigrations

now open file and put this code right after the static _url

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')`
`import os
from pathlib import Path`
also in
Now Define Url Routes
In Your Django Directory
`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)`
and put this code in  in your django app
`from django.urls import path

from .views import HomePageView,CreatePostView

urlpatterns =[
    path('post',CreatePostView.as_view(),name = 'add_post'),

creating Views in your django app

from django.views.generic import ListView,CreateView
from django.urls import reverse_lazy
from .forms import PostForm
from .models import Post

 ##  Create your views here.

class HomePageView(ListView):
    model = Post
    template_name = 'home.html'

class CreatePostView(CreateView):
    model = Post
    form_class = PostForm
    template_name = 'post.html'
    success_url = reverse_lazy('home')

Creating Templates For django app make a folder in your root folder name templates like this



<!doctype html>
<html lang="en">

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        /* navbar */

        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 60px;
            background: #1d1d1d;
            padding: 0 10vw;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 9;

        .brand {
            font-weight: 500;

        .links-container {
            display: flex;
            list-style: none;

        .link {
            text-transform: capitalize;
            color: #fff;
            text-decoration: none;
            margin: 0 10px;
            padding: 10px;
            position: relative;

        .link:hover:not(.active) {
            opacity: 0.7;
        .seperator::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #fff;
        .seperator::after {
            content: '';
            position: absolute;
            bottom: 2px;
            left: 0;
            width: 100%;
            height: 1px;
            background: #fff;

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;

        html {
            scroll-behavior: smooth;

        body {
            width: 100%;
            position: relative;
            background: #1d1d1d;
            color: #fff;
            font-family: 'roboto', sans-serif;

        .hero-content {
            display: block;
            margin: 260px auto 20px;
            width: 100%;
            height: 40px;
            border-radius: 5px;
            padding: 10px;
            border: none;
            outline: none;
            text-transform: capitalize;
            width: 50%;
            font-family: 'Lobster', cursive;
            background: #ff3559;
            color: #fff;

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;

        .footer {
            margin: 260px auto 20px;
            width: 100%;
            height: 30px;
            text-align: center;
            background: #ff3559;
            font-family: 'Lobster', cursive;
            line-height: 30px;


    <nav class="navbar">
        <h1 class="brand">izna.</h1>
        <div class="toggle-btn">
        <ul class="links-container">
            <li class="links-item"><a href="#" class="link active">home</a></li>

    <a href="{% url 'add_post' %}" class="hero-content">Upload your images Here</a>
        <div class="album py bg-light">
            <div class="container">
                <div class="row">
                    {% for post in object_list %}

                    <div class="col-md-2">
                        <p class="card-text">{{ post.title}}</p>
                        <div class="card mb-4 shadow-sm">
                            <img class="card-img-top" src="{{post.image.url}}" alt="{{post.title}}" width="200" height="200px">
                    {% endfor %}

    <footer class="footer">&copy; 2021 Copyright @hAnii all right reserved</footer>
    <script src="" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>



<h1> Create a Post</h1>
<form method="post" enctype="multipart/form-data">
    {% csrf_token %} {{form.as_p }}
    <button type="submit">Submit New Post</button>

Test app

Now Test App

python runserver


If You Have Any Queries Feel Free To Ask

Did you find this article valuable?

Support Hanii by becoming a sponsor. Any amount is appreciated!

Learn more about Hashnode Sponsors
Share this