Monacaでformdataを使って画像ファイルをアップする方法

Question

お世話になっております。

今、Monacaアプリをクライアントとして、Python Djangoで実装したサーバーサイドに画像ファイルをアップロードする処理を作成しています。しかし、うまくアップロードできず、サーバー上のログファイルにエラーが返ってきてしまいます。おそらくformdataの使い方が悪いのではないかと思うのですが、どう実装したら良いのかわからず悩んでいます。

django.utils.datastructures.MultiValueDictKeyError: "'image'"

画像ファイルは、スマホのカメラまたはアルバムから選択して取得しています。
クライアント側のJavascriptのコードは以下のようになっています。

function imageFileUploader(imageType, image) {

    var credentials = {
        filetype: imageType,
    };
    var image_file = image;

    $.ajax({
        url: HOST_NAME + "user/api/get_filename/",
        type: 'GET',
        dataType: 'json',
        data: credentials,
        timeout: 10000,
    })

    .done(function (data) {

        jsondata = JSON.parse(data);
        image_file_name = jsondata.fileurl;

        // Test if the image is shown -> success
        document.getElementById("previewimage").src = image

        var formData = new FormData();
        formData.append('filename', image_file_name);
        formData.append('image', image);

        $.ajax({
            url: HOST_NAME + "user/api/file_uploader/",
            type: 'POST',
                timeout: 10000,
                data: formData,
                processData: false,
                contentType: false,
        })
        .done(function (data) {
            jsondata = JSON.parse(data);
            alert("File upload completed...");
        })
        .fail(function (XMLHttpRequest, textStatus, errorThrown) {
            alert(textStatus);
        })
    .fail(function (XMLHttpRequest, textStatus, errorThrown) {
        alert(textStatus);
    })

}

function snapPicture () {

    navigator.camera.getPicture (onSuccess, onFail,
        {quality: 50, destinationType: Camera.DestinationType.FILE_URI, 
        saveToPhotoAlbum: true});

    function onSuccess (imageURI) {

        var file_name = imageFileUploader("T", imageURI);
        if (file_name == "") {
            console.log("False");
        }
        else {
            image_send(file_name);
        }
    }

    function onFail (message) {
        console.log("False");
    }
}

一方、Python側のコードは以下の通りです。

def post(self, request, format=None):
    outputLogFile("Upload Function is called...")
    req_file_name = request.data['filename']
    req_image = request.FILES['image']

req_file_nameは問題なく取得することができています。
アドバイスをいただければ幸いです。
よろしくお願いいたします。

Answer 1

ajaxでファイルを送るのであればFileReaderを利用されたほうがよろしいのでは？