javascriptfilemakerfilestack

Javascript Filepicker not loading in Filemaker Pro Webviewer

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.

Solution

  • 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>```