Plots2: 画像のアップロードに失敗する

マイナーな問題については、＃9442も参照してください。

ありがとう@waridrox ：+1：

問題をさらにデバッグしようとすると、ローカルファイルストレージから画像をアップロードするときに発生したエラーは
Paperclip::Errors::CommandNotFoundError: Could not run the 'identify' command. Please install ImageMagick.
ローカル開発環境下。 これは、ファイルのアップロードを処理するpaperclip gemの新しい依存関係であると私は信じています。

コマンドsudo apt-get install imagemagickまたはbrew install imagemagickを使用してimagemagickをインストールした後、これらの2行のコードをdevelopment.rbファイルに追加しました。

Paperclip.options[:image_magick_path] = "/opt/ImageMagick/bin"
Paperclip.options[:command_path] = "/opt/ImageMagick/bin"

その後、サーバーを再起動するだけで、 jpeg 、 png 、 gifなどのファイルタイプでファイルのアップロードが再び機能しました。 これが同じことを垣間見ることができます-

https://user-images.githubusercontent.com/58583793/113514702-c308e700-958d-11eb-8e12-59c7a9648b24.mp4

stackoverflowの_thisthread_から、本番アプリでの変更を反映するために、これらの2行をproduction.rbにも追加する必要があります。

また、 https： //github.com/publiclab/plots2/blob/main/doc/PREREQUISITES.md#image -libraries-optionalにimage-magickをインストールするためのオプションのパラメーターが原因で、この動作が最初に観察されました。

@waridroxに感謝します。変更をプルしましたが、まだエラーが発生します。他の誰かが最後に試してみてください。 ありがとう

ああ😅それについて本当に申し訳ありません、plsはプルを元に戻します。 ローカルで動作しますか？ たぶん、最初にsudo apt-get update試し、次にsudo apt-get install imagemagickを試すと役立つでしょう...

みなさん、こんにちは。ローカルではimagemagickであることは理にかなっていますが（またはimagemagickがない場合）、安定した状態でインストールする必要があります。 それは安定版の明確なバグなのだろうか？ Sentry.ioをクロスチェックする必要があります。 アクセスできますか？

これを見つけて文書化してくれてありがとう！

プロフィール写真に関連する場合を除いて、画像のアップロードで歩哨エラーが表示されません（これはスパムや攻撃が原因であることがよくあります）。

エラーのパスは何ですか？ 500エラーですか？

申し訳ありませんが、/最近の/エラーを意味します

@waridroxローカルでは機能しませんでした。バージョンが間違っている可能性があります。

ああ、302エラーは確かに...🕵️

なぜそうなるのかを見ていきます。 ありがとうございました！

GitPodで実行して、302を再現できるかどうかを確認します...

OK、GitPodからログを取得しました！

Started POST "/images" for 10.4.6.182 at 2021-04-13 18:36:40 +0000
Cannot render console from 10.4.0.249! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255
Processing by ImagesController#create as JSON
  Parameters: {"nid"=>"null", "image"=>{"photo"=>#<ActionDispatch::Http::UploadedFile:0x00007f444ce23c30 @tempfile=#<Tempfile:/tmp/RackMultipart20210413-4879-sla487.jpg>, @original_filename="11aa-love-ryan2-720.jpg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"image[photo]\"; filename=\"11aa-love-ryan2-720.jpg\"\r\nContent-Type: image/jpeg\r\n">}}
Can't verify CSRF token authenticity.
Redirected to https://3000-aquamarine-bass-qsunlo8p.ws-us03.gitpod.io/login?return_to=/images
Filter chain halted as :require_user rendered or redirected
Completed 302 Found in 2ms (ActiveRecord: 0.0ms)


Started GET "/login?return_to=/images" for 10.4.6.182 at 2021-04-13 18:36:40 +0000
Cannot render console from 10.4.0.249! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255
Processing by UserSessionsController#new as JSON
  Parameters: {"return_to"=>"/images"}
  User Load (0.5ms)  SELECT  `rusers`.* FROM `rusers` WHERE `rusers`.`id` = 1 LIMIT 1
   (0.2ms)  BEGIN
  User Update (0.5ms)  UPDATE `rusers` SET `last_request_at` = '2021-04-13 18:36:40', `updated_at` = '2021-04-13 18:36:40' WHERE `rusers`.`id` = 1
   (28.6ms)  COMMIT
Redirected to https://localhost/home?return_to=%2Flogin
Filter chain halted as :require_no_user rendered or redirected
Completed 302 Found in 35ms (ActiveRecord: 29.7ms)

さて、なぜ私たちはログインにリダイレクトされるのですか...探しています...

CSRFトークンが機能していないようです...見てみましょう...

https://github.com/publiclab/plots2/blob/bd7b2e26c1edbd85a9754d8b25bc27950fd99770/app/views/editor/rich.html.erb#L344 -L347

ここに渡します。

$('meta[name="csrf-token"]').attr('content')はトークンを正しくフェッチするので、そうではありません...

GitPodでは、メインの画像アップローダーが機能することに注意してください。 同じコントローラーを使用しているため、問題はエディターのリッチテキストモジュールコード自体にある可能性があります。

Started POST "/images" for 10.4.0.248 at 2021-04-13 18:47:45 +0000
Cannot render console from 10.4.6.181! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255
Processing by ImagesController#create as JSON
  Parameters: {"authenticity_token"=>"5Z5plBlzFXbu2qCKPTDZYa54DWaNn556hs9FzyvH2U8NDMabePLVh1RlBuhkRR+Ej+kgI/hLIAm9LcdrEZv4lg==", "uid"=>"1", "image"=>{"photo"=>#<ActionDispatch::Http::UploadedFile:0x000055644bef1898 @tempfile=#<Tempfile:/tmp/RackMultipart20210413-5664-bsht8f.jpg>, @original_filename="11aa-love-ryan2-720.jpg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"image[photo]\"; filename=\"11aa-love-ryan2-720.jpg\"\r\nContent-Type: image/jpeg\r\n">}}

実際、メインの画像アップローダーもリクエストでトークンを使用します。

https://github.com/publiclab/PublicLab.Editor/blob/59e5bf6fd1ac2b6f9108e522baa7cdab36e0bb64/src/modules/PublicLab.MainImageModule.js#L94

それは正しくそれをフェッチします：

editor.options.mainImageModule.token
"5Z5plBlzFXbu2qCKPTDZYa54DWaNn556hs9FzyvH2U8NDMabePLVh1RlBuhkRR+Ej+kgI/hLIAm9LcdrEZv4lg=="

確認済み。 メインの画像アップロードでは、フォームリクエストに次の一連のパラメータが含まれています。

authenticity_token: 5Z5plBlzFXbu2qCKPTDZYa54DWaNn556hs9FzyvH2U8NDMabePLVh1RlBuhkRR+Ej+kgI/hLIAm9LcdrEZv4lg==
uid: 1
image[photo]: (binary)

インライン画像のアップロードには次のものしかありません。

nid: null
image[photo]: (binary)

コードのそのセクションに対する最近の変更と、モジュールオプション自体をチェックして、コンストラクターから適切に格納/渡されていることを確認します。

うわー、深いバグ。 https://github.com/jywarren/woofmark/pull/2からwoofmarkライブラリに戻って追跡します： https ：

woofmarkブランチにあります：

https://github.com/jywarren/woofmark/blob/plots2/src/prompts/prompt.js#L133

28日前のこのPRが関係しているのではないかと思います。 私たちが使用しているwoofmarkのブランチへの最後の変更は、2020年9月に行われました。

https://github.com/jywarren/woofmark/pull/76/files

woofmark -2つのルートのコードに何も表示されていません：

1. Woofmarkを介してupload.xhrOptionsパラメータをトレースし、正しく取得されていることを確認します
2. xhr npmモジュールが変更されたかどうかを確認する

https://www.npmjs.com/package/xhrは2.65か月前に公開されましたが、私たちのプロジェクトでは何ヶ月もの間2.2.1になっています。 package-lock.jsonで確認済み

OK、それで、JSコンソールでテストされたように、 upload.xhrOptionsパラメータbeforeSendはそれをwoofmarkにします。

それは実際に余分なヘッダーを生成しますか？

xhrOptions: { 
        beforeSend: function(xhr) { xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content')) }
      },

これがいつ機能しなくなったのかはわかりませんが、別のformDataパラメータを追加して、そのようにすることができると思いますか？ しかし、それが他の人に渡されるのか、それともxhr libがそれを無視するのかわからないのですか？

これは、2020年11月5日にhttps://github.com/publiclab/PublicLab.Editor/releases/tag/v3.0で、または28日前にhttps://github.com/publiclab/plots2/pull/で発生したことに注意して

この行によると、私はformDataが正常に渡されるはずだと信じています：

https://github.com/bevacqua/woofmark/pull/44/files#diff -b70752c6e4fb751c6aa381f57afac66c25cc2d401b141b03e1751d81e60efcd2R216

GitPodで試してみます：

      formData: {nid: null, authenticity_token: _module.options.token},

...それをしました：

https://github.com/publiclab/PublicLab.Editor/pull/712 、リリース3.0.3で修正され、 formDataトークンが追加されます。 / pull / 9504。

ふぅ！

完了し、安定して確認されました！

@ publiclab-mimiは本日そのことを報告しました

リサーチノートエディタで、JPEG、PDF、またはPNGをアップロードできませんでした。
Google ChromeとSafariでは、ドラッグアンドドロップと参照オプションの両方があります

@ebarry 、変更をライブバージョンにプッシュするために必要なバッファ時間のため、現在のバージョンにはまだ上記の変更がないと思います。 これは、画像/ファイルのアップロードが安定バージョンとレガシーバージョンで機能するためです。

新しいコードは昨夜公開されました！ 見てみると、新しいエラーが表示されています-500エラー：

これから始めて、Cessが見つけたのと同じ302です：

次に、この新しい500エラーにリダイレクトされます。

これは実際にはログインに成功したときだと思いますが、すでにログインしているので変ですか？

セントリーはここにログを記録したと思いますが、ログイン試行の前後にエラーが発生したかどうかはわかりません。

https://sentry.io/share/issue/13e10e65210c4ceb9860ec687482d9b7/

`` `
ActionView :: MissingTemplate
{：locale => [：en] 、： formats => [：json] 、： variants => [] 、： handlers => [：raw、：erb、：html、：builder 、：ルビー、：コーヒー、：jbuilder]}。 検索対象：

• 「/ app / app / views」
• "/usr/local/bundle/gems/grape-swagger-ui-2.2.8/app/views"
• "/usr/local/bundle/gems/grape-swagger-rails-0.3.1/app/views"
• `` `

ええと、これを追跡するのに問題があるので、GitPodでもう一度再現してみますか？

OK、 @ icaritoと私は、実際の3.0.3エディターコードを取り込むためのyarn更新の問題を解決し、それを確認してから、SSLに関連するもう1つのnginx問題を修正しました。ライブサイトでの作業。 みんな、ありがとう！

：then ：： then ：： then：

驚くばかり！！！ ありがとうございました