Ember JsからRailsにAjaxを使用してCSVファイルを送信

Question

Ember Jsからajaxを使用してcsvファイルをアップロードし、それをRailsアプリケーションで読み込もうとしています。 私は2つの異なるアプローチを試みました。

submitImport() { 
    var fd = new FormData(); 
    var file = this.get('files')[0]; 
    fd.append("csv_file", file); 
    return this.get('authAjax') 
    .request('/contacts/import/csv', { 
     method: 'POST', 
     processData: false, 
     contentType: false, 
     data: fd 
    }); 
} 

をしかし、問題は、私はRailsアプリケーションでcsv_fileのPARAMを取得しないことです：最初の1で私はこのようなエンバーからファイルを送信しようとしました。 request.content_typeはapplication/x-www-form-urlencodedで、マルチパートフォームが必要です。私はreques.raw_postを使用することができましたが、次に------WebKitFormBoundarymgBynUffnPTUPW3l\r\nContent-Disposition: form-data; name=\"csv_file\"; filename=\"elevatr_import.csv\"\r\nContent-Type: text/csv\r\n\r\ngeorgica,gica@me.com\nleo, leonard@yahoo.com\ngigel, becali@oita.fcsb\n\r\n------WebKitFormBoundarymgBynUffnPTUPW3l--\r\nのようなものが得られました。何とかこれを解析する必要があります。このソリューションは本当に好きではありません。

もう1つの方法は、base64でエンコードされたファイルを送信し、それをRailsからデコードすることでした。

`

submitImport() { 
    var fd = new FormData(); 
    var file = this.get('files')[0]; 
    this.send('getBase64', file); 
    var encoded_file = this.get('encoded_file'); 

    return this.get('authAjax') 
    .request('/contacts/import/csv', { 
     method: 'POST', 
     data: { csv_file: encoded_file } 
    }); 
}, 
getBase64(file) { 
    var controller = this; 
    var reader = new FileReader(); 
    reader.readAsDataURL(file); 
    reader.onload = function() { 
    controller.set('encoded_file', reader.result); 
    }; 
} 

をしかし、いくつかの理由で、ポストの要求は、最初で唯一のgetBase64メソッドが呼び出されたことを後に提出されている：私はこれを試してみました。 これはなぜ起こっているのですか、別の方法を使用すべきかどうかは誰にも分かりますか？

おかげ

Answer 1

いるFormData

multipart/form-dataを使用して送信するには、あなたは、正しい考えを持っているし、正しいオプションを設定しているが、それはauthAjaxまたは何か他のものが競合を引き起こしているオプションを設定されている可能性がありますコンテンツタイプはapplication/x-www-form-urlencodedとなります。

// this should make a request with a content-type of multipart/form-data 
$.ajax({ 
    url: 'upload/destination', 
    type: 'POST', 
    data: formDataObj, 
    contentType: false, 
    processData: false, 
}); 

Base64で

あなたの要求が行われた後、ファイルが読み込まれた理由は、非同期FileReader動作することです。 base64でエンコードされた文字列として送信するには、ajaxリクエストを開始する前にリーダーが完了するまで待つ必要があります。あなたはonloadendイベントの後にあなたのリクエストを行うことでそれを行うことができます。

actions: { 
    submitImport() { 
    var file = this.get('files')[0]; 
    this.encodeAndSendFile(file); 
    }, 
}, 
sendFile(base64File) { 
    return this.get('authAjax') 
    .request('/contacts/import/csv', { 
    method: 'POST', 
    data: { csv_file: encoded_file }, 
    }); 
}, 
encodeAndSend(file) { 
    var controller = this; 
    var reader = new FileReader(); 
    reader.onloadend = function() { 
    controller.sendFile(reader.result); 
    }; 
    reader.readAsDataURL(file); 
}