nuxt.js × Rails CSVアップロードフォームを作る

はじめに

新卒エンジニアの@yhorikawaです
nuxt.jsとRailsを使ってCSVアップロードフォームを作るのに苦戦したので、記事として残します。

csvファイル

1,hoge,100
2,foo,200
3,bar,300

このようなcsvが存在していて、一行ずつ保存したいと仮定します。

フロント側

<template>
  <div class="container">
    <input @change="handleChange" type="file" name="file">
    <button @click="handleSubmit" type="submit">保存</button>
  </div>
</template>
<script>
export default {
  data: {
    file: null,
  },
  methods: {
    handleChange(e) {
      this.file = e.target.files[0];
    },
    handleSubmit() {
      let formData = new FormData();
      formData.append('file', this.file);
      this.$axios
        .$post('csvFileUploadUrl', formData)
        .then(response => {
          // 成功した時の処理
        }).catch(err => {
         // エラーの時の処理
        });
    },
  },
};
</script>

ファイルをpostできなくて苦戦していたのですが、
FormDataを利用することで簡単にファイルアップロードをすることができました！

Rails側

require 'csv'
def csv_upload
  CSV.foreach(params[:file]) do |row|
    # 保存処理
  end
end

おわりに

今回はファイルアップロードフォームを作成しました。
単純に実装できそうだと思って作り始めたのですが、意外と難しかったので記録として残しておこうと思います。