Filestack/Filepicker Integration

ionic-v1
1

I’m trying to integrate Filestack in my app so users can upload a profile image, crop it and save it to their account. I was able to get it up and running quickly and everything worked using:

ionic serve --lab

But in Ionic View and the iOS emulator it’s not working. In Ionic View when I get the the point of selecting or taking a picture my app appears to be killed and I’m returned to the list of my apps in Ionic View. In the emulator it’s not working at all, the button to initiate the upload process does nothing.

I’ve been trying different things but haven’t had any success. The only thing I’ve found that discusses using Ionic and Filestack together is: https://www.filestack.com/docs/support/integration/136 but it hasn’t helped.

Anyone out there have success using Filestack in an Ionic app and get it to work in Ionic View, emulator or published app?

2

I was finally able to figure this all out. If you can get your filestack image uploader working in the brower (i.e. ionic serve --lab), everything should work in the emulator/physical device. I’ve only done this for iOS so far.

A few notes:

  • This guide: https://www.filestack.com/docs/support/integration/136, although not super detailed has come good points. Make sure to set the container as: {container:'modal'}. Also, make sure you install the cordova inappbrowser plugin. It sets itself to window.open, so it should work well with the filestackapi.js library.
  • The uploader won’t work in Ionic View since the inappbrowser plugin isn’t supported.
  • Important - The biggest issue I had that I couldn’t figure out for the longest time was that on the emulator/real device, without specifying something like <allow-navigation href="*" /> in my config.xml file, all external URLs were being blocked, which included the filepicker modal.
3

Is there a way to integrate filestack in ionic 2 and angular 2. I have tried using a global type declaration: declare var filestack: any; after scripting filestack into my main index.html file. I have also tried importing filestack after npm installing it with import filestack from ‘filestack-js’. But the modal doesn’t pop up at all. Is the device blocking the modal from popping up?