How to upload files with Filestack in Meteor?

1

I have added this code in my blaze form template provide by the Filestack:

            <script type="text/javascript" src="https://static.filestackapi.com/v3/filestack.js"></script>
            <script>
                var client = filestack.init('MY API KEY');
                function showPicker() {
                    client.pick({
                    }).then(function(result) {
                        console.log(JSON.stringify(result.filesUploaded))
                    });
                }
            </script>
            <input type="button" value="Upload" onclick="showPicker()" />

I am getting this errors:

project.js:27 Uncaught ReferenceError: filestack is not defined

When i click the button i get this error message:

VM13567:4 Uncaught TypeError: Cannot read property 'pick' of undefined

I have also tried this code:

Template.layout.onRendered(function () {
    $('head').append('<script type="text/javascript" src="https://static.filestackapi.com/v3/filestack.js"></script>');
});

Anyone worked befor with Filestack with Meteor. Is there any Package or instruction/docs?

2

I just signed up for a test account and was able to upload a file as follows. I am sure there are other solutions. I believe your approach didn’t work because you tried to filestack.init before the script from filestackapi was loaded. The Meteor way is to use Meteor.startup, but you might also have success with the script defer option.

Meteor.startup(function(){
  $.getScript('https://static.filestackapi.com/v3/filestack.js')
    .done(function(script, textStatus){
      WebApp.filestack = filestack.init(<API KEY>);
    })
    .fail(function(jqxhr, settings, exception){
      console.error(exception);
    })
  ;
});
Template.filestack.events({
  'click button.filestack'(event,instance){
    if(WebApp.filestack)
      WebApp.filestack.pick({
      }).then(function(result) {
          console.log(JSON.stringify(result.filesUploaded))
      });
});

<template name="filestack">
  <div class="well">
    <h1>Filestack</h1>
  </div>
  <button class="filestack">Upload</button>
</template>
1 Like
3

Great! It worked. Thanks!
How can i upload those files to my collection, find and display for the specific post?

4

You just need to store the elements in result.filesUploaded in a collection of your choosing, just as any other document you would store in mongo.

1 Like
5

Do i just need to store the api result into my collection with post/user id? Can you please share some code?