0

Currently facing an issue with Filepicker's iframe in my application... my tools:

  • Framework: Rails 4 (including turbolinks)
  • API: Filepicker.io (JS)
  • File type: Coffeescript

My sample code:

ready = ->
filepicker_api_key = $js_data.data('filepickerApiKey')
unprocessed_path = $js_data.data('unprocessedPath')
filepicker.setKey(filepicker_api_key)
  $('#image-upload').click (e) ->

    picker_options =
    services: ['COMPUTER']
    mimetypes: ['image/*']

    store_options =
    location: 's3'
    path: unprocessed_path
    access: 'public'

    filepicker.pickAndStore picker_options, store_options ->
      console.log 'foobar'
      # alot of code comes here.. which works whenever I refresh the page

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

It stops once I try uploading something. My logs show this error:

Error: Permission denied to access property 'filepicker_comm_iframe'

and doesn't show my 'foobar' log

But when I refresh the page, I receive no error, and the file uploads accordingly. I am trying to avoid the flaw of having to refresh the page in order to upload successfully.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
levelone
  • 2,289
  • 3
  • 16
  • 17

3 Answers3

1

Since with turbolinks the body is reloaded, I suggest to move in layout file this code:

<%= filepicker_js_include_tag %>

from <head> to <body>.

It should work fine then (in Rails 4, without installing 'jquery-turbolinks' gem). In the future we will work on the general solution, independent on where this tag was placed.

Maciej Witowski
  • 92
  • 5
0

I was able to solve this issue, by adding gem 'jquery-turbolinks' to my Gemfile (thus running bundle), and including //= jquery.turbolinks to my application.js.

So far this has been the only valuable work around that I've come across. For this specific scenario.

levelone
  • 2,289
  • 3
  • 16
  • 17
0

After loaded, filepicker js add 2 iframes to body. When you use turbolinks to change page, they are gone. So you need to add them again by your self:

    if $("#filepicker_comm_iframe").length == 0
      $("body").append '<iframe name="filepicker_comm_iframe" id="filepicker_comm_iframe" src="https://dialog.filepicker.io/dialog/comm_iframe/" style="display: none;"></iframe>'
    if $("#fpapi_comm_iframe").length == 0
      $("body").append '<iframe name="fpapi_comm_iframe" id="fpapi_comm_iframe" src="https://www.filepicker.io/dialog/comm_iframe/" style="display: none;"></iframe>'
Ba Viet
  • 1
  • 1