Save ImageField in UpdateView Django

Question

• I have an image field in profile model.
• I am not able to save the image from template.
• Tried saving image using django admin, it successfully saves the image and display the image in the update view.

How do I save the image from frontend not from django admin?

Models

class Profile(models.Model):
    image         = models.ImageField(upload_to='profile_images', null=True, blank=True)
    profile_email = models.CharField(max_length=30, null=True, blank=True)
    biography     = models.CharField(max_length=700, null=True, blank=True)

View

class ProfileSettingsView(UpdateView):
    model = Profile
    form_class = ProfileSettingsForm
    pk_url_kwarg = 'pk'
    context_object_name = 'object'
    template_name = 'profile_settings.html'

    def get_success_url(self):
          return reverse_lazy('users:profile_settings', args = (self.object.id,))

Template

{% if object.image %}
<a href=""><img style="border-radius:50%; text-align:center; margin-bottom: 20px; border: 2px solid #00a6eb;" class="center" src="{{ object.image.url }}"alt=""></a>
{% endif %}

<label style="display: inline-block" for="file-upload" class="custom-file-upload">
    <i class="fa fa-cloud-upload"></i> Upload Photo
</label>
<input id="file-upload" name="image" onchange="this.form.submit()" type="file"/>

Urls

urlpatterns = [
    path('users/', include('users.urls', namespace='users')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Settings

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
TEMPLATE_DIR = os.path.join(BASE_DIR,'templates')
STATIC_DIR = os.path.join(BASE_DIR,'static')
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    STATIC_DIR,
]
STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'

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

Form

class ProfileSettingsForm(forms.ModelForm):

    class Meta:
        model = Profile

        fields = ['image','full_name','biography','profile_email','linked_in','facebook',
                  'twitter','phone','education']

        widgets = {
            'image'          : forms.TextInput({'class': 'form-control'}),
            'full_name'      : forms.TextInput({'class': 'form-control'}),
            'profile_email'  : forms.TextInput(attrs={'readonly': True}),
            'biography'      : forms.Textarea({'rows':'10'}),
            'twitter'        : forms.TextInput({'class': 'form-control'}),
            'linked_in'      : forms.TextInput({'class': 'form-control'}),
            'facebook'       : forms.TextInput({'class': 'form-control'}),
            'phone'          : forms.TextInput({'class': 'form-control'}),
        }

Answer 1

Change image widget to FileInput

widgets = {
    'image' : forms.FileInput(attrs={'class': 'input-image-control'}),
    ...