javascript - HTML ドラッグ アンド ドロップを使用してファイルや画像をアップロードする際の問題

Question

今、私はこの画像アップロードフォームを持っています:

image_upload.html

<form id="image_upload_form" enctype="multipart/form-data" method="post" action="">
    <input id="id_image" type="file" name="image">
    <input type="submit" value="Upload">
</form>

次のコードは、POST リクエストを処理するための私の Django forms.py と views.py です。

フォーム.py

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

ビュー.py

class MyView(DetailView):
    def post(self, request, *args, **kwargs):
        form = ImageUploadForm(request.POST, request.FILES)
        if form.is_valid():
            print("FORM IS VALID!!!");

            # Do Something....

画像ファイルをアップロードしてフォームを送信すると、データがサーバーに正しく POST され、「FORM IS VALID!!!」という応答が返されます。

ただし、ドラッグ アンド ドロップのアップロード機能を追加したかったので、次のコードを追加しました。

image_upload.html

<form id="image_upload_form" enctype="multipart/form-data" method="post" action="">
    <input id="id_image" type="file" name="image">
    <input type="submit" value="Upload">
</form>

<div id="image_upload_drop_area">Drop Image Here</div>

upload.js

var drop_area = $("#image_upload_drop_area");
drop_area.bind('drop', drop);

function drop(event) {

    var file = event.originalEvent.dataTransfer.files [0];
    data = new FormData();
    data.append('image', file);

    $.ajax({
        url: location.href,
        data: data,
        processData: false,
        type: 'POST',
        success: function ( data ) {
            console.log("SENT SUCCESS");
        }
    });

これはうまくいきません。「データ」は間違いなくサーバーに送信されますが (サーバーから「SENT SUCCESS」メッセージを受け取ります)、「#image_upload_form」の入力としてではありません。

つまり、「FORM IS VALID!!!」というメッセージが表示されません。つまり、「request.FILES.」には保存されません。

画像ファイルが ("#imag_upload_form") のフォーム データとして送信されるようにするには、JavaScript コードをどのように変更すればよいですか?? (つまり、ID「#id_image」の入力)

ありがとう