Django Class-based ViewCreate and ViewUpdate file upload

Question

I have a project where I wish to upload an image with the Django auto generated class-based views, and it works on the admin side, but I don't know what I'm missing to make it work from an HTML page. I've searched the web with a little luck or not enough clarification.

So maybe someone can tell me what I'm missing. Here is my code:

settings.py

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(os.path.dirname(BASE_DIR), 'project/app/media_cdn')

models.py

from django.db import models
from django.core.urlresolvers import reverse

class Article(models.Model):
    title       = models.CharField(max_length = 200)
    ...
    thumbnail   = models.FileField(null = True, blank = True)
    ...
    def __str__(self):
        return self.title
    def get_absolute_url(self):
        return reverse('articles_detail', kwargs={'pk': self.pk})

    class Meta:
        ordering = ['-pk']

views.py

from django.shortcuts import render
from app.models import Article
from django.views.generic import *
from django.core.urlresolvers import reverse_lazy
from django.contrib.auth.mixins import LoginRequiredMixin

# Create your views here.
def index(request):
    return render(request, 'index.html')

class ArticleList(ListView):
    model = Article

class ArticleDetail(DetailView):
    model = Article

class ArticleCreate(LoginRequiredMixin, CreateView):
    model = Article
    fields = ['title', 'description', 'abstract', 'thumbnail', 'author', 'category', 'publishDate']

class ArticleUpdate(LoginRequiredMixin, UpdateView):
    model = Article
    fields = ['title', ..., 'thumbnail', ...]

class ArticleDelete(LoginRequiredMixin, DeleteView):
    model = Article
    success_url = reverse_lazy('articles_list')

urls.py

from django.conf.urls import url
from django.contrib import admin
from django.conf import settings
from django.conf.urls.static import static

from app import views, auth

urlpatterns = [
    url(r'^admin/',admin.site.urls),
    ...
    url(r'^articles/(?P<pk>[0-9]+)/$', views.ArticleDetail.as_view(),  name = 'articles_detail'),
    url(r'^articles/create/$', views.ArticleCreate.as_view(),  name = 'articles_create'),
    url(r'^articles/update/(?P<pk>[0-9]+)/$', views.ArticleUpdate.as_view(),  name = 'articles_update'),
    url(r'^articles/delete/(?P<pk>[0-9]+)/$', views.ArticleDelete.as_view(),  name = 'articles_delete'),

]

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root = settings.MEDIA_ROOT)

article_form.html

{% extends 'layout.html' %}

{% block content %}
    <form method="post" action="" enctype="multipart/form-data">
        {% csrf_token %}
        {{ form.as_p }}

        <button type="submit">Submit</button>
    </form>
{% endblock %}

As much as I was able to gather, I managed to follow all the steps but I still can't get the thumbnail to update when uploading from articles/create/ and articles/update/.../

Thanks in advance.