Загрузка файлов с помощью ActiveStorage в Vue.js

Я хочу добавить загрузку файлов в модель карты (включая один и несколько файлов) с помощью новой функции Rails 5.2 ActiveStorage. Я сильнее разбираюсь в Rails и использую Vue.js для этого - раньше я бы использовал Paperclip для этого. Однако я установил файл config/storage.yml и необходимые миграции для ActiveStorage. Я также установил связь между на Карте и обновил CardController, чтобы разрешить files: [].

Созданный мной компонент card.vue в настоящее время работает хорошо; Карточка может иметь название и описание, и описание может быть обновлено. Эти записи сохраняются в базе данных. Моя проблема заключается в том, чтобы выяснить, как привязать загрузку файлов к карте, и логику, необходимую для загрузки нескольких файлов при сохранении.

В настоящее время я использую <input name="files" type="file" data-direct-upload-url="/rails/active_storage/direct_uploads" direct_upload="true" /> для создания поля ввода на карточке. Однако после выбора изображения PDF на моем локальном компьютере и нажатия кнопки «Сохранить» журналы показывают, что ничего не происходит [в отношении вставки новой строки в active_storage_attachments или создания большого двоичного объекта]. Как я могу расширить метод сохранения, чтобы принять файл?

card.rb

class Card < ApplicationRecord
  has_many_attached :files
end

CardController

class CardsController < ApplicationController
  private
    def card_params
      params.require(:card).permit(:list_id, :title, :position, :description, files: [])
    end
end

card.vue

<template>
  <div>
    <div @click="editing=true" class="card card-body">
      <h4>
        {{card.title}}
      </h4>
    </div>

    <div v-if="editing" class="modal-backdrop show"></div>

    <div v-if="editing" @click="closeModal" class="modal show" style="display: block">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <div>
              <h4>
                {{card.title}}
              </h4>
            </div>
          </div>
          <div class="modal-body">
            <div>
              <h5>{{card.description}}</h5>
            </div>
            <textarea v-model="description" class="form-control"></textarea>
          </div>
          <div class="modal-footer">
            <input name="files" type="file" data-direct-upload-url="/rails/active_storage/direct_uploads" direct_upload="true" />
            <button @click="save" type="button" class="button button-secondary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  props: ["card", "list"],

  data: function() {
    return {
      editing: false,
      title: this.card.title,
      description: this.card.description,
      files: []
    }
  },

  methods: {
    save: function() {
      var data = new FormData
      data.append("card[title]", this.title)
      data.append("card[description]", this.description)

      Rails.ajax({
        url: `/cards/${this.card.id}`,
        type: "PATCH",
        data: data,
        dataType: "json",
        success: (data) => {
          const list_index = window.store.lists.findIndex((item) => item.id == this.list.id)
          const card_index = window.store.lists[list_index].cards.findIndex((item) => item.id == this.card.id)
          window.store.lists[list_index].cards.splice(card_index, 1, data)

          this.editing = false
        }
      })
    }
  }
}
</script>