reactjsmeteorfilestack

Filestack with Meteor remove file security error


I'm trying to get the react filestack plugin to work with meteor and I'm having trouble with it when I turn on the security setting so I can remove files I've uploaded. There are 4 things I need use App Secret, policy, signature, apikey to remove a file. I get an error Error: security policy and signature are required to remove, and I get another error asking for the App Secret. Any idea what I'm doing wrong.

Path: ImageUpload.jsx

import React from 'react';
import PropTypes from 'prop-types';
import ReactFilestack from 'filestack-react';

export default class ImageUpload extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};

    this.handleImageUpload = this.handleImageUpload.bind(this);
    this.handleDelete = this.handleDelete.bind(this);
  }

  handleImageUpload(result) {
    console.log('Image upload worked');
  }

  handleDelete() {
    console.log("Remove image worked");
  }

  render() {
    const options = {
      fromSources: ["local_file_system","webcam","facebook","instagram","dropbox"],
      accept: 'image/*',
      maxFiles: 1,
      transformations: { crop: { force: false } },
      storeTo: {
        location: 's3',
      },

    };

    const security = {
      policy: 'mypolicykey',
      signature: 'mysignuture',
      handle: 'imagehandle'
    };

    return (
      <div>
        <ReactFilestack
          apikey={'myapikey'}
          buttonText="Upload image"
          buttonClass="btn btn-secondary"
          options={options}
          onSuccess={this.handleImageUpload}
          security={security}
        />

        <ReactFilestack
          apikey={'myapikey'}
          buttonText="Delete image"
          buttonClass="btn btn-secondary"
          options={security}
          onSuccess={this.handleDelete}
          mode={'remove'}
        />
      </div>
    );
  }
}

Path: settings-dev

{
  "public": {
    "filepicker":{
      "secret": "mysecertapp",
      "policy": "mypolicy",
      "signature": "mysignature"
    }
  },
  "private": {
  },
}

Solution

  • In the place where you delete, you are not passing security or signature:

        <ReactFilestack
          apikey={'myapikey'}
          buttonText="Delete image"
          buttonClass="btn btn-secondary"
          options={security}
          onSuccess={this.handleDelete}
          mode={'remove'}
        />
    

    In fact you have a options={security} which I'm fairly sure is wrong