Javascript Filepicker not loading in Filemaker Pro Webviewer

Question

I can get my Filestack Filepicker to load in a simple HTMl document, but then when I move that exact code into my Filemaker Webviewer it doesnt work. From everything I have read this should be doable in a Filemaker Webviewer. What am I missing??

I believe I have tried everything obvious here.

here is my simple code (I removed my API key - but again it worked fine as a html doc in Chrome).

Html that works:

<html>
  <head>
   <script src="https://static.filestackapi.com/filestack-js/3.x.x/filestack.min.js" crossorigin="anonymous"></script>
  </head>
  <body>
      <script>
         const client = filestack.init('APIKEYWASHERE');
         client.picker().open();
      </script>
  </body>
</html>

And here was my FMP Webviewer code:

    Let( [  

    html = "
      <html>
        <head>
          <script  type='text/javascript' src=\"https://static.filestackapi.com/filestack-js/3.x.x/filestack.min.js\" crossorigin=\"anonymous\"></script>
        </head>
        <body>
            <script type='text/javascript' >
               const client = filestack.init('APIKEYWASHERE');
               client.picker().open();
            </script>
        </body>
    </html>"

    ]; "data:text/html," & html)

Just shows up as a totally blank window.

I haven't tried your code but you should be aware that FileMaker uses the system browser when rendering the Web Viewer. On Windows it uses IE and on Mac it uses Safari. You should debug using those browsers. — AndreasT, Jul 19 '19 at 12:07
Works fine for me on a Mac - OSX 10.12.6 FMP 16. Try to change webviewer size, also try to save it as an external html file and load it in webviewer — Nicolai Kant, Jul 19 '19 at 12:45
Thanks Andreas. I didnt realize that. You are indeed right - it didnt work in IE11. Some additional debugging and I am getting 'symbol' is undefined and 'filestack' is undefined. So apparently I needed a polyfill per Filestack. — Dan, Jul 19 '19 at 13:17
But I cant get the polyfill to work. I added this to my code: ``` ``` and it is still throwing the same error. Any thoughts? — Dan, Jul 19 '19 at 13:19

score 0 · Accepted Answer · answered Jul 22 '19 at 19:00

I solved this after some deep digging and a consult from a friend. Needed a polyfill, which I found several that didnt work until finally the one in the code here that did. I also needed to have these loading before the call to load the Filepicker JS. Bottom line - IE11 is not your friend. Here is the code that worked in IE...

<html>
  <head>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>
   <script src="https://static.filestackapi.com/filestack-js/3.x.x/filestack.min.js" crossorigin="anonymous"></script>
  </head>
  <body>
      <script>
         const client = filestack.init('my API KEY');
         client.picker().open();
      </script>
  </body>
 </html>```

Javascript Filepicker not loading in Filemaker Pro Webviewer

1 Answers1