3

Rails 3.2、ターボリンク、Filepicker.io を使用して Web アプリを開発しています。

このように API キーをロードします (coffeescript)。$(document).readyファイルピッカースクリプトは最初のリクエストで一度ロードされるので、これで十分だと思います。

$(document).ready ->
  filepicker.setKey "MY_KEY"

Filepicker に次の (coffeescript) をロードします。jquery-turbolinksターボリンクのサポートを jquery に直接組み込む gemを使用していることに注意してください。

jQuery ->
  $("#publications_bulk-new #upload-button").on "click", ->
    form = $(this).closest('form')
    filepicker.pickAndStore

ページに直接アクセスすると、ファイルピッカーは期待どおりに機能します。ただし、ターボリンク リクエストを使用してページにアクセスすると、ファイルをアップロードできません。

フォームを開いたり、Dropbox を参照したりできますが、アップロード時に次のエラー メッセージが赤色で表示されます。

Cannot send results to the applicaiton. Sorry about this, it's our fault. Please close this window and try again.

再試行しても役に立ちません。

Chrome 28.0 のコンソールでエラー メッセージを確認したところ、次のことがわかりました。

Blocked a frame with origin "https://www.filepicker.io" from accessing a frame with origin "http://placeholder.library.dev".  The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "http". Protocols must match.
 main.js:7
u main.js:7
l main.js:7
i.uploadFiles main.js:7
v.onFileDrop main.js:7
r lodash.min.js:6
(anonymous function) main.js:7

Uncaught Communication iframe not found main.js:7
u main.js:7
l main.js:7
i.uploadFiles main.js:7
v.onFileDrop main.js:7
r lodash.min.js:6
(anonymous function)

更新 2013-07-29 「プロトコル、ドメイン、およびポートは一致する必要があります」

現在のコードを実稼働環境にプッシュしました。これは、(開発) ページの SSL 暗号化が欠落していることが原因であることがメッセージに示されているためです。

残念ながら、これだけが問題ではありません

Blocked a frame with origin "https://www.filepicker.io" from accessing a frame with origin "https://jkreutz.mylibrar.io". Protocols, domains, and ports must match. main.js:7
u main.js:7
l main.js:7
i.uploadFiles main.js:7
v.onFileDrop main.js:7
r lodash.min.js:6
(anonymous function) main.js:7
Uncaught Communication iframe not found main.js:7
u main.js:7
l main.js:7
i.uploadFiles main.js:7
v.onFileDrop main.js:7
r lodash.min.js:6
(anonymous function)
4

2 に答える 2

4

TL;DR - 回避策: 本文に従来の javascript ファイル インクルードを使用し、呼び出すときは注意してくださいfilepicker.setKey(...)。

ターボリンクが有効になっている Rails 4 アプリを使用していますが、ファイルピッカーを含むページがターボリンク経由で 2 回目 (またはそれ以上) 読み込まれると、Filepicker で同様の問題が発生します。私は従来の js と非同期 js の両方を試しましたが、それぞれに独自の方法があります。

「高度な」(非同期 js) メソッドを使用する場合、失敗は厄介なメッセージです。

アプリケーションに結果を送信できません。申し訳ありませんが、それは私たちのせいです。このウィンドウを閉じて、もう一度やり直してください。

Blocked a frame with origin ...およびUncaught Communication iframe not found（Chromeの場合）のjavascriptコンソールエラー。

これは、最初に読み込まれたときに js によって本文に追加された iframe が、ページ本文が (ターボリンクによって) 変更されたときに上書きされ、2 回目のターボリンク ページの読み込み時に再び追加されないことが原因であると確信しています。

従来の js アプローチでは、物事の順序は非常に厄介です。ページに従来の js を含めてから、その後ページに .js を含めるとfilepicker.setKey(...)、2 番目のページの読み込みはUncaught FilepickerException: API Key not found. ただし、.setKey()後で呼び出すことが確実な場合 (ピッカーが呼び出されたときなど)、動作するようです。（通信iframeは、従来のjs方式のページに再度作成されたように見えます。）

私はこれについて Filepicker サポートに手紙を書きました。うまくいけば、これに対する推奨/文書化されたアプローチが出てくることを願っています (彼らはレールに熱心であるように見えるので...)。

于 2013-08-09T08:34:21.793 に答える