2

Angular 5 フロントエンドと Rails 5 バックエンドを使用するアプリケーションに取り組んでいます。どちらも JSON を介して通信する API です。さらに、アップロードには、Shrine gem と Uppy を使用しています。アップロードを開始して実行するために、次の 2 つのチュートリアルに従い ました 。

私が直面している問題は、データをレールに送信するには、テンプルからアップロードされた name 属性とレールの添付ファイルがデータをレール アプリケーションに渡すために一致する必要があることです。したがって、チュートリアルから、これは：

# models/movie.rb

class Movie < Sequel::Model
  include VideoUploader::Attachment.new(:video)
end

次の name 属性と一致する必要があります。

<div class="form-group">
  <input type="hidden" name="movie[video]" value="<%= @movie.cached_video_data %>" class="upload-hidden">
  <input type="file" name="movie[video]" class="upload-file">
</div>

私は Rails フロントエンドを使用していないので、データはそれほど簡単には渡されません。2つを調和させる方法はありますか？name 属性値として以下を Rails API に渡そうとしました:

name="movie[video]"
name="video"

次のような JSON 値を送信しようとしました。

name="{
  "id":"http://endpoint.com/files/226eed1388bbd1b7f029897ad2b86f16",
  "storage":"cache",
  "metadata":{
    "filename":"SampleVideo_720x480_1mb.mp4",
    "size":1057149,
    "mime_type":"video/mp4"
  }
}"

これは、Rails コンソールで movie.video を実行したときと同じ JSON 形式と一致するためです。

これを機能させる方法はありますか？

編集：

わかりました、私は間違った質問をしました。申し訳ありませんが、これはチュートリアルに従っていない最初のプロジェクトです。私はこれを機能させるために多くの時間を費やしました：

name="{
  "movie": {
    "video": {
      "id":"http://endpoint.com/files/226eed1388bbd1b7f029897ad2b86f16",
      "storage":"cache",
      "metadata":{
        "filename":"SampleVideo_720x480_1mb.mp4",
        "size":1057149,
        "mime_type":"video/mp4"
      }
    }
  }
}"

データが tus-js-client と tus-server 経由で送信されていることに気付く前に。したがって、適切な質問は、正しい名前属性を tus-js-client に送信して、それを tus-server に送信し、最終的に Rails アプリケーションに渡すことができるようにする方法です。バックエンドの詳細については、create アクションとムービー パラメータを次に示します。

def create
    movie = Movie.new(movie_params)

                if movie.save
                        render json: movie, status: 201
                else
                        render json: { errors: movie.errors }, status: 422
                end
        end

private

                def movie_params
                #       params.permit(:title, :year, :plot, :video_data)
                       params.require(:movie).permit(video: [metadata: [:title, :year, :plot]])
                #       params.require(:movie).permit!
                end

また、この情報の送信方法については、Uppy の組み込み送信を使用しています。これはAngularの通常の送信方法を放棄するため、tus-js-clientを介して送信されます(私は思います)。情報が何かを意味する場合、name 属性を送信しようとして、添付ファイル属性と一致するようにあらゆる方法を試すことにかなりの時間を費やしました。

4

0 に答える 0