Search code examples
djangofile-uploaddjango-formscsrfimage-uploading

Django: Troubles uploadind and handling an image (CSRF token missing or incorrect)


I'm just trying to practice with Django. I tried to make a simple app which allows you to upload an image and return the pixelated version of it. I have two views: one to show the form and one to handle the image and return the result. The problem is that a 'Forbidden (403)' is raised instead of the result. Reason given for failure: CSRF token missing or incorrect.

urls.py

from django.conf.urls import url
from . import views

urlpatterns = [
    url(r'^$', views.index, name='index'),
    url(r'^result/$', views.pixelate, name='pixelate')
]

views.py

from django.http import HttpResponse
from django.shortcuts import render_to_response
from .forms import UploadImageForm
from .pixelate import pixelate_image

def index(request):
    form = UploadImageForm()
    return render_to_response('pixelate/index.html', {'form': form})

def pixelate(request):
    form = UploadImageForm(request.POST, request.FILES)
    if form.is_valid():
        response = HttpResponse(content_type='image/png')
        response['Content-Disposition'] = 'filename="image.png"'

        img = pixelate_image(request.FILES['image'])
        response.write(img)
        return response

pixelate.py

from PIL import Image
from io import BytesIO

def pixelate_image(img, pixelSize=9):
    buffer = BytesIO()
    p = Image(buffer)
    image = p.open(img)
    image = image.resize((image.size[0]/pixelSize, image.size[1]/pixelSize), Image.NEAREST)
    image = image.resize((image.size[0]*pixelSize, image.size[1]*pixelSize), Image.NEAREST)
    image.save()
    final_image = buffer.getvalue()
    buffer.close()
    return final_image

forms.py

from django import forms

class UploadImageForm(forms.Form):
    image = forms.ImageField()

index.html

<form action="{% url 'pixelate:pixelate' %}" method="post">
    {% csrf_token %}
    {{ form }}
    <input type="submit" value="Submit" />
</form>

Solution

  • index.html

    <form action="{% url 'pixelate:pixelate' %}" method="post"  enctype="multipart/form-data">
        {% csrf_token %}
        {{ form }}
        <input type="submit" value="Submit" />
    </form>