ユーザーがアップロードしたCSVファイルをAJAXを使用してRailsバックエンドに送信するにはどうすればよいですか？

Question

私はRails/React Webアプリケーションを実行しており、ユーザーがCSVファイルをアップロードするためのファイル入力フィールドを持っています。このCSVファイルをバックエンドに送信して解析し、その情報を使用して新しいユーザーバッチを作成したいと思います。

私は私の入力フィールド

<div> 
<label htmlFor="add-doc">Bulk Add</label> 
<input style={{display: 'none'}} onChange={this.uploadCSV} id="add-doc" name='csv-file' type="file"/> 
</div> 

そして、私のonChange機能を持っています。私はいろいろなことを試しましたが、主に私がファイルをどのように渡しているかと思いますが、間違ったフォーマットになっているのでしょうか？私は知らない

uploadCSV(evt) { 
    evt.preventDefault(); 
    let file = evt.target.files[0] 
    let formData = new FormData(); 
    formData.append('file', file); 
    $.ajax({ 
    url: '/api/v1/client/employees', 
    type: 'POST', 
    dataType: 'json', 
    data: formData, 
    contentType: false, 
    processData: false 
    }); 
    } 

Answer 1

レールにはgem pryを使用していますか？肯定の場合はbinding.pryをコントローラのメソッドに置き、サーバ端末にparamsと書いて答えを入れます。

おそらく、フロントエンドからバックエンドへのエンコードが可能です。

Answer 2

encアップロードのため、multipart/form-dataのencタイプを使用する必要があると思います。

私は、この問題がサーバー側ではなくクライアント側にあると言っているという結論に至りました。スタックトレースやブレークポイントからの情報を使用して特定のエラーを出すことができれば、私は助けになるかもしれません。これは私の頭の上に来るものです。

uploadCSV(evt) { 
    evt.preventDefault(); 
    let file = evt.target.files[0] 
    let formData = new FormData(); 
    formData.append('file', file); 

    $.ajax({ 
     url: '/api/v1/client/employees', 
     type: 'POST', 
     data: formData, 
     async: false, 
     cache: false, 
     contentType: false, 
     enctype: 'multipart/form-data', 
     processData: false, 
     success: function (response) { 
     alert(response); 
     } 
    }); 
});