Today I’m going to cover how to add user document and image file uploads to your Django project as a simple HTML form and Django ModelForm.

I’m using Bootstrap 5 for some basic styling.

Django Media Files

First configure your media upload settings before creating and uploading the form.

Add Media URL to Django settings

mysite > mysite >

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

Head over to the file and specify the MEDIA_URL and MEDIA_ROOT. They are not specified by default.

Install Pillow

Windows Command Prompt

(env) C:\Users\Owner\Desktop\Code\env\mysite> pip install Pillow

Also install Pillow for media upload support.

Add Media URL to Django URLs

mysite > mysite…

You have a software product and you want to make a website for it. The conventional wisdom would be to hire a web developer. However, if you want to save money, and have more control over the outcome of the project, you can also build your own site.

Building a website is not an easy task for a SaaS, startup, and entrepreneur. However, there are plenty of tools out there that will come to your aid. One of them is Bootstrap, which makes it even easier for you to create a website that looks great on any device. …

What is Supabase?

Supabase is an open-source alternative to Google’s Firebase. It’s currently free to use, supporting PostgreSQL databases and authentication tools.

It relies on existing open-source projects and a serverless solution will be released soon.

React + Supabase Tutorial

Create a Supabase account

Django ModelForms is a helper class that allows you to create a Form class from an existing Django model.

It honestly sounds more complicated than it actually is to implement.

Create a Django Model

Add a model to

mysite > main >

from django.db import models# Create your models here.class Movie(models.Model):
movie_title = models.CharField(max_length=150)
release_year = models.IntegerField()
director = models.CharField(max_length=100)
movie_poster = models.ImageField(upload_to='images/', null=True)
movie_plot = models.TextField()
def __str__(self):
return self.movie_title

The example above is from How to use Django Models. The model contains CharFields, IntegerField, ImageField, and a TextField.

The function at the bottom returns the movie’s title as…

A Bootstrap modal is a component that’s positioned over everything else in the HTML document. Bootstrap modals by default place a transparent, darkened background over all elements behind the modal.

React is an open-source JavaScript library for user interface components. When combined, React and Bootstrap modals can quickly create a clean UI experience for edit forms, extra information, and confirmations.

Create your React App

Facebook’s create-react-app

C:\Users\Owner\desktop\react> npx create-react-app react-bootstrap

Create a React app from Facebook’s create-react-app repo. It has Babel and webpack already configured.

You’ll want to refer to the React beginner’s guide if you’re new to this.

Install React-Bootstrap

Windows Command Prompt

Adding a React “Copy to Clipboard” function is easy enough. It can be done inline or called as a method.

Basics of the React Copy to Clipboard event handler

onClick React event


Start with a onClick React event.

Inline event handler

onClick={() => {navigator.clipboard.writeText("http://localhost:3000/")}}

The arrow function is the React event handler, contained within curly braces.

Add navigator.clipboard to access the system clipboard and write the text "http://localhost:3000/" as the contents of the clipboard.

Event handler as a method

copy() {

onClick ={this.copy}

Another way is to place the event handler as a separate method and call…

A favicon or favorite icon is the icon located on the left side of a browser tab. The generic favicon for Google and Firefox browser tabs is a globe icon.

Websites often override this generic favicon and use their logo or an image associated with their site.

Favicons are typically added to the head element, but the Django favicon location is the static folder where it is then called via the file.

This tutorial will show you how to add a favion.ico file to your Django project and, in the process, get rid of the Django favicon.ico …

Tailwind CSS currently does not have documentation on how to integrate the Tailwind CSS download with a Django project.

Luckily there is a package designed for this exact integration.

Note: I’ll name my environment, project, and app env, project and app to keep things simple.

Install Node.js and npm

Many websites list their contact email address in the footer where it is up to the user to send an email. While this is by no means a bad way for users to contact staff, it requires more work and effort on the user’s side than what’s necessary.

So let’s help the user easily send a contact email with an in-site contact form that instantly sends an email to the website staff upon submission. While this may seem daunting at first, Django actually handles most of the heavy lifting.

We will cover (1) how to create the Django contact form…

Here are 7 examples of basic Tailwind CSS buttons. These buttons examples were added to a React Tailwind project, but the Tailwind class attribute values work with HTML as well.

Check out the TailwindCSS section of Top 3 CSS Frameworks for Front-end Development if you are new to Tailwind.

TailwindCSS Buttons

Tailwind CSS comes with utilities for controlling background color, border radius, and text alignment, making buttons extremely easy to customize to your liking.

I’ve added a gray background to better see the white buttons.

Basic Primary Buttons

Ordinary Coders

Coding can be difficult. Get motivated by learning to code with interactive, step-by-step tutorials.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store