ImageField – Django forms

ImageField in Django Forms is a input field for upload of image files. The default widget for this input is ClearableFileInput. It normalizes to: An UploadedFile object that wraps the file content and file name into a single object. This article revolves about how to upload imges with Django forms and how can you save that to the database.

Note:

  • When Django handles a file upload, the file data ends up placed in request.FILES (for more on the request object see the documentation for request and response objects).
  • While working with files, make sure the HTML form tag contains enctype="multipart/form-data" property.

Syntax

field_name = forms.ImageField(**options)

Django form ImageField Explanation

Illustration of ImageField using an Example. Consider a project named geeksforgeeks having an app named geeks.

Refer to the following articles to check how to create a project and an app in Django.



Enter the following code into forms.py file of geeks app.

filter_none

edit
close

play_arrow

link
brightness_4
code

from django import forms
  
class GeeksForm(forms.Form):
    name = forms.CharField()
    geeks_field = forms.ImageField()

chevron_right


Add the geeks app to INSTALLED_APPS

filter_none

edit
close

play_arrow

link
brightness_4
code

# Application definition
  
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'geeks',
]

chevron_right


Now to render this form into a view we need a view and a URL mapped to that URL. Let’s create a view first in views.py of geeks app,

filter_none

edit
close

play_arrow

link
brightness_4
code

from django.shortcuts import render
from .forms import GeeksForm
  
# Create your views here.
def home_view(request):
    context = {}
    context['form'] = GeeksForm()
    return render( request, "home.html", context)

chevron_right


Here we are importing that particular form from forms.py and creating an object of it in the view so that it can be rendered in a template.
Now, to initiate a Django form you need to create home.html where one would be designing the stuff as they like. Let’s create a form in home.html.

filter_none

edit
close

play_arrow

link
brightness_4
code

<form method="POST" enctype="multipart/form-data">
    {% csrf_token %}
    {{ form.as_p }}
    <input type="submit" value="Submit">
</form>

chevron_right


Finally, a URL to map to this view in urls.py

filter_none

edit
close

play_arrow

link
brightness_4
code

from django.urls import path
  
# importing views from views..py
from .views import home_view
  
urlpatterns = [
    path('', home_view ),
]

chevron_right


Let’s run the server and check what has actually happened, Run

Python manage.py runserver

django-forms-imagefield

Thus, an geeks_field ImageField is created by replacing “_” with ” “. It is a field to input image files from the user.

How to upload Files using ImageField – Django Forms ?

ImageField is used for input of image files in the database. One can input Email Id, etc. Till now we have discussed how to implement ImageField but how to use it in the view for performing the logical part. To perform some logic we would need to get the value entered into field into a python string instance.
ImageField is different from other fields and it needs to be handled properly. As stated above, data fetched from a ImageField would be stored in request.FILES object. Let’s create a ImageField in Django models to demonstrate the saving of images using forms in database. To get working code for upload of files from github click here.
In models.py,

filter_none

edit
close

play_arrow

link
brightness_4
code

from django.db import models
  
# Create your models here.
class GeeksModel(models.Model):
    title = models.CharField(max_length = 200)
    img = models.ImageField(upload_to = "images/")
  
    def __str__(self):
        return self.title

chevron_right


In views.py,

filter_none

edit
close

play_arrow

link
brightness_4
code

from django.shortcuts import render
from .forms import GeeksForm
from .models import GeeksModel
  
# Create your views here.
def home_view(request):
    context = {}
    if request.method == "POST":
        form = GeeksForm(request.POST, request.FILES)
        if form.is_valid():
            name = form.cleaned_data.get("name")
            img = form.cleaned_data.get("geeks_field")
            obj = GeeksModel.objects.create(
                                 title = name, 
                                 img = img
                                 )
            obj.save()
            print(obj)
    else:
        form = GeeksForm()
    context['form']= form
    return render(request, "home.html", context)

chevron_right


Let’s explain what this code does, this code saves the file uploaded by the user in GeeksModel ImageField Database. Whenever a file is uploaded, it is saved to request.FILES object with key as name of the field. So we have created a model where image uploaded by the user is saved. Let’s try saving a image file to the database now.

django-forms-imagefield-2

It has loaded successfully and file is saved in GeeksModel of geeks app. Obove object is printed and hence instance of obj has been created.
django-forms-imagefield-3

Core Field Arguments

Core Field arguments are the arguments given to each field for applying some constraint or imparting a particular characteristic to a particular Field. For example, adding an argument required = False to ImageField will enable it to be left blank by the user. Each Field class constructor takes at least these arguments. Some Field classes take additional, field-specific arguments, but the following should always be accepted:

Field Options Description
required By default, each Field class assumes the value is required, so to make it not required you need to set required=False
label The label argument lets you specify the “human-friendly” label for this field. This is used when the Field is displayed in a Form.
label_suffix The label_suffix argument lets you override the form’s label_suffix on a per-field basis.
widget The widget argument lets you specify a Widget class to use when rendering this Field. See Widgets for more information.
help_text The help_text argument lets you specify descriptive text for this Field. If you provide help_text, it will be displayed next to the Field when the Field is rendered by one of the convenience Form methods.
error_messages The error_messages argument lets you override the default messages that the field will raise. Pass in a dictionary with keys matching the error messages you want to override.
validators The validators argument lets you provide a list of validation functions for this field.
localize The localize argument enables the localization of form data input, as well as the rendered output.
disabled. The disabled boolean argument, when set to True, disables a form field using the disabled HTML attribute so that it won’t be editable by users.



My Personal Notes arrow_drop_up

Software Developer at GeeksForGeeks

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : nidhi_biet, NaveenArora

Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.