【Rails+Nuxt】RailsのActive Storage ダイレクトアップロード機能を Nuxt から使う

[
     {
         "AllowedHeaders": [
             "*"
         ],
         "AllowedMethods": [
             "GET",
             "POST",
             "PUT"
         ],
         "AllowedOrigins": [
             "*"
         ],
         "ExposeHeaders": []
     }
 ]

# == Schema Information
#
# Table name: cats
#
#  id              :bigint    not null, primary key
#  name　　　　　　　 :string    not null
#  created_at      :datetime  not null
#  updated_at      :datetime  not null

class Cat < ApplicationRecord
   has_one_attached :image
end

 module Api
   module V1
     class CatImageUploadsController < ::Api::ApplicationController
       def create
         cat = Cat.find_by!(name: name)
         cat.attributes = controller_params
         if cat.save
           render json: { status: 200 }
         else
           render json: cat.errors, status: 422
         end
       end
 
       private
 
       def name
         File.basename(filename, ".*")
       end
 
       def filename
         params[:filename]
       end
 
       def controller_params
         # imageはファイルではなくblob.signed_idが送られてきます
         params.permit(:image)
       end
     end
   end
 end

require 'active_storage/direct_uploads_controller'
 
class ActiveStorage::DirectUploadsController
  protect_from_forgery with: :null_session
  skip_before_action :verify_authenticity_token
end

<template>
   <div class="box">
     <input
       id="image-files"
       ref="image_files"
       type="file"
       multiple
       accept="image/*"
       @change="onChangeFiles"
     >
     <table>
       <thead>
         <tr>
           <th>ファイル名</th>
           <th>進捗</th>
           <th>メッセージ</th>
         </tr>
       </thead>
       <tbody>
         <tr v-for="(file, idx) in files" :key="idx">
           <td>{{ file.name }}</td>
           <td>
             <b-progress type="is-success" :value="file.progress" show-value format="percent" />
           </td>
           <td>{{ file.message }}</td>
         </tr>
       </tbody>
     </table>
   </div>
 </template>

yarn add @rails/activestorage

OR

npm i @rails/activestorage

 import { DirectUpload } from "@rails/activestorage"
 
 class DirectUploader {
   constructor(file, url, onProgressCallback) {
     this.file = file
     this.url = url
     this.onProgressCallback = onProgressCallback
     this.directUpload = new DirectUpload(this.file, this.url, this)
   }
 
   upload(onErrorCallBack, onSuccessCallback) {
   	// createメソッドを実行
     this.directUpload.create((error, blob) => {
       if (error) {
         // エラー時の処理
         onErrorCallBack(error, this)
       } else {
         // 成功時の処理
         onSuccessCallback(blob, this)
       }
     })
   }
 
   directUploadWillStoreFileWithXHR(request) {
     request.upload.addEventListener("progress", event => this.directUploadDidProgress(event))
   }
 
   directUploadDidProgress(event) {
     this.onProgressCallback(event, this)
   }
 }
 
 export default DirectUploader

 <script>
 import DirectUploader from '@/lib/DirectUploader'
 
 export default {
   data () {
     return {
       files: []
     }
   },
   methods: {
     onChangeFiles (_event) {
       const input = this.$refs.image_files
       this.uploadFiles(input.files)
       // 選択されたファイルを入力からクリアしておく
       input.value = null
     },
     uploadFiles (files) {
       this.files = []
       Array.from(files).forEach(file => this.uploadFile(file))
     },
     uploadFile (file) {
       // アップロードを実行
       const filename = file.name
       const tmpUploadFile = { name: filename, fileSize: file.size, progress: 0, isUploading: true }
       this.files.push(tmpUploadFile)
       const url = 'http://localhost:3000/rails/active_storage/direct_uploads'
       const directUploader = new DirectUploader(file, url, this._onUploadProgress.bind(this))
       directUploader.upload(this._onUploadError.bind(this), this._onUploadSuccess.bind(this))
     },
     _onUploadError (error, directUploader) {
       // アップロード失敗時の処理
       const params = { isUploading: false, message: error }
       const filename = directUploader.file.name
       this._updateFiles(filename, params)
     },
     async _onUploadSuccess (blob, directUploader) {
       // アップロード成功時の処理
       const filename = directUploader.file.name
       const params = { isUploading: false, message: 'アップロード完了' }
       const postParams = { filename: blob.filename, image: blob.signed_id }
       const url = 'http://localhost:3000/api/v1/cat_image_uploads'
       try {
         await this.$axios.$post(url, postParams)
         this._updateFiles(filename, params)
       } catch (error) {
         const params = { isUploading: false, message: error }
         this._updateFiles(filename, params)
       }
     },
     _onUploadProgress (event, directUploader) {
       // アップロード中の処理
       const progress = this._calcProgress(event)
       const params = { progress }
       const filename = directUploader.file.name
       this._updateFiles(filename, params)
     },
     _updateFiles (filename, params) {
       this.files = this.files.map((file) => {
         if (file.name !== filename) { return file }
         return Object.assign(file, params)
       })
     },
     _calcProgress (event) {
       return (event.loaded / event.total) * 100
     }
   }
 }
 </script>