Listen as audio |
Hello Techies,
In this blog, we will check different ClearableFileInput Django form fields (FileField, ImageField) with examples.
The fields of the form are classes themselves; They manage form data and perform validation when the form is submitted.
Syntax : FieldType(**kwargs)
Table of Contents
Different types of ClearableFileInput Django Form Fields
FileField
The default widget for this input is the ClearableFileInput. This normalizes the UploadedFile object by wrapping the file content and file name into one object. It can validate that a non-empty file is bound to the data form.
It has two optional arguments for validation, max_length and, allow_empty_file.
Syntax: FileField(**kwargs)
Example:
from django import forms
class ClearableFileInputForm(forms.Form):
file_field = forms.FileField(label='File Upload', label_suffix = " : ",
required = True, disabled = False, allow_empty_file=True,
max_length=500, widget=forms.ClearableFileInput(attrs={'class': 'form-control'}),
error_messages = {'required':"This field is required."})Let’s run the server and check the result.
Rendered HTML
Explanation:
| Field Options | Description |
|---|---|
| label | Label Argument allows you to specify a “field caption” label for this area. |
| label_suffix | label_suffix argument allows you to insert some text after the field’s label. |
| max_length | If provided, this ensures that the file name is the maximum given length. |
| allow_empty_file | Validation will succeed even if the file content is empty. |
| required | By default, each field assumes a value as required, so you need to set required as a false to make it as not necessary. |
| widget | The default widget for this field is ClearableFileInput. This argument lets specify widget classes to use when presenting this field. So you can use bootstrap class or any other CSS class for this field to decorate your field. Also, you can pass the choice list. For eg. file_field = forms.FileField(widget=forms.ClearableFileInput(attrs={‘class’: ‘form-control’})) |
| error_messages | This argument allows you to overwrite the default error message that the field will raise. Pass the error message you want to overwrite in the dictionary with the matching key. |
| disabled | Disabled Boolean Argument, if set to true, disables the form field using the disabled HTML properties so that it cannot be edited by users. |
ImageField
The default widget for this input is the ClearableFileInput. The empty value is None. This normalizes the UploadedFile object by wrapping the file content and file name into one object. It can validate that a non-empty file is bound to the data form. It also uses FileExtensionWaller to validate that file extension is supported by the pillow library.
The pillow must be installed with the support of the images you are using to use the ImageField. When you upload an image and if you encounter a corrupt image error, it means that Pillow doesn’t understand its format. To fix this issue, install the appropriate library and reinstall Pillow.
Syntax: ImageField(**kwargs)
Example:
from django import forms
class ClearableFileInputForm(forms.Form):
image_field = forms.ImageField(label='Image Upload', label_suffix = " : ",
required = True, disabled = False,
widget=forms.ClearableFileInput(attrs={'class': 'form-control'}),
error_messages = {'required':"This field is required."})
Let’s run the server and check the result.
Rendered HTML
Explanation:
| Field Options | Description |
|---|---|
| label | Label Argument allows you to specify a “field caption” label for this area. |
| label_suffix | label_suffix argument allows you to insert some text after the field’s label. |
| required | By default, each field assumes a value as required, so you need to set required as a false to make it not necessary. |
| widget | The default widget for this field is ClearableFileInput. This Argument lets you specify widget classes to use when presenting this field. So you can use bootstrap class or any other CSS class for this field to decorate your field. Also, you can pass the choice list. For eg. image_field= forms.ClearableFileInput(widget=forms.ClearableFileInput(attrs={‘class’: ‘form-control’})) |
| error_messages | This argument allows you to overwrite the default error message that the field will raise. Pass the error message you want to overwrite in the dictionary with the matching key. |
| disabled | Disabled Boolean Argument, if set to true, disables the form field using the disabled HTML properties so that it cannot be edited by users. |
I hope you understand all the ClearableFileInput Django Form Fields. You can check the official site for more information.
Find the source code for ClearableFileInput Django Form Fields Github link at:
https://github.com/pranalikambli/django_form_fields
