DjangoでAjaxによる画像のアップロードができなくて困っています。助けて下さい。

Question

こんにちは、

djangoでウェブアプリを作成しています。
そのアプリの中で画像をアップロードするようにする必要があるのですが、画像をアップロードするとリダイレクトされてしまうのが嫌なのでAjaxを使ってアップロードすることにしましたが上手くアップロー度ができません。

コードを見て下さい。大事なところだけ抜粋しています。

#######################
##### app/urls.py #####
#######################

from . import views # 下のコードブロックで定義したものをimportしています

app_name = 'app'

urlpatterns = [
    path('', views.index, name='index'), # index 画面
    path("upload/", views.img_upload, name='upload'), # Ajaxのアップロード先
]

########################
##### app/views.py #####
########################

from .models import Img # モデルです。下のコードブロックで定義します
from .forms import DocumentForm # アップロード時のフォームです。２個下で定義します

def img_upload(request):
    if request.method == 'POST':
        upload_model = Img() # 新規モデルの作成
        imgform = DocumentForm(request.POST, request.FILES, instance=upload_model)

        if imgform.is_valid():
            imgform.save()

        return HttpResponse(upload_model.uuid) # アップロードした画像のUUIDを返す

#########################
##### app/models.py #####
#########################

class Img(models.Model):
    uuid = models.UUIDField(primary_key=True, default=uuid4, editable=False) # uuidフィールド
    photo = models.ImageField(upload_to='imgs/', default='defo') # 画像フィールド

########################
##### app/forms.py #####
########################

from .models import Img # 上のコードブロックで定義したコード

class DocumentForm(forms.ModelForm):
    class Meta:
        model = Img
        fields = ('photo',)

<!--
########################################
##### app/templates/app/index.html #####
########################################
-->

<form method="post" enctype="multipart/form-data" class="form" action="{% url 'app:upload' %}">
    {% csrf_token %}
    <p>
        <input type="file" name="photo" id="id_photo" class="file-button">
    </p>
    <button type="submit" id=>Upload</button>
</form>
<div id="result"></div><!--アップロード結果を表示するためのdiv-->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="{% static 'js/index.js' %}"></script><!--下のコードブロックに記したJSコード-->

/*
##################################
##### app/static/js/index.js #####
##################################
*/
$("form").submit(function(event) {
    event.preventDefault();
    var form = $(this);
    $.ajax({
        url: form.prop("action"),
        method: form.prop("method"),
        data: form.serialize(),
        processData: false,
        contentType: false,
        timeout: 5000,
    })
    .done( function(data) {
          $("#result").text(data);
    })
    .fail( function() {
          $("#result").text("failed")
    })
});

このようなコードでpython manage.py runserverを実行し、繋げ、アップロードボタンを押しても、Failedとかえってきます。
サーバー上にも画像はアップロードされていません。
サーバー側のログには

Forbidden (CSRF token missing or incorrect.): /upload/
[*/*/* *:*:*] "POST /upload/ HTTP/1.1" 403 *

と書かれています。
どのように間違っているのかを教えて下さい。
お願いします。

Answer 1

今更$.ajaxを利用するよりfetchで十分ですけどね
ファイル自体はformdataで渡してください