0

Rails 4 アプリには、S3 にアップロードする 2 つのファイル フィールド入力を含むフォームがあります。

<form accept-charset="UTF-8" action="/projects" class="new_project" enctype="multipart/form-data" id="new_project" method="post">

  <input id="project_videos_attributes_0_poster" name="project[videos_attributes][0][poster]" type="file">

  ....

  <input class="js-s3_file_field" data-acl="public-read" id="project_gifts_attributes_0_file" name="project[gifts_attributes][0][file]" type="file">

</form>

最初のファイル フィールドは Carrierwave を使用し、もう 1 つは S3 に直接アップロードするために s3_file_field gem に接続されていますが、iPad でページを表示すると両方が無効になります。他のプラットフォーム/ベンダーには、この問題はありません。また、入力が単独で提示されている場合にも見られます。

Turbolinks に iPad 固有の問題があるかどうか疑問に思っています。Rails UJS が原因でしょうか? 価値のあるものとして、s3_file_field gem が 2 番目のファイル入力をハイジャックするために使用するコードを次に示しますが、どのプラットフォームでもいずれかのファイル フィールドが無効になる可能性がある方法がわかりません。

ready = ->
  $(".js-s3_file_field").each ->
    id = $(this).attr('id')
    $this = -> $("##{id}")
    $progress = $(this).siblings('.progress').hide()
    $meter = $progress.find('.meter')
    $(this).S3FileField
      add: (e, data) ->
        $progress.show()
        data.submit()
      done: (e, data) ->
        window.data = data.result
        $progress.hide()
        $this().attr(type: 'text', value: data.result.url, readonly: true)
      fail: (e, data) ->
        alert(data.failReason)
      progress: (e, data) ->
        progress = parseInt(data.loaded / data.total * 100, 10)
        $meter.css(width: "#{progress}%")

$(document).ready(ready)
$(document).on('page:load', ready)

とても奇妙です。iPad でも HTML コードを読み取ることができないため、トラブルシューティングが非常に困難です。Linux、Windows、Mac、Android ではすべて問題ありません。ただし、iPhoneの保証はできません。

4

1 に答える 1