How to use filestack-js - 7 common examples

withHash,
  attachmentsStorePath,
  category,
  selectedUsers,
  onAddAttachment,
  onUploadAttachment,
  isSharingAttachment,
  discardAttachments,
  onChangePermissions,
  pendingAttachments,
  projectMembers,
  loggedInUser,
  onDeletePostAttachment
}) => {

  const fileUploadClient = filepicker.init(FILE_PICKER_API_KEY, {
    cname: FILE_PICKER_CNAME
  })

  const renderLink = (link) => {
    if (link.onClick) {
      return (
        <a href="{link.address}"> {
            // we only prevent default on click,
            // as we handle clicks with </a><li><a href="{link.address}">
            evt.preventDefault()
          }}
        &gt;
          {link.title}
        </a></li>

this.form = {
      imageSelected: false,
      selectedCategoryIDs: [],
      errors: [],
      submitSuccess: false,
      submitButtonDisabled: this.hasConfessionLimitExceeded(),
    };

    // Load all categories onto form.
    this.CategoryService.getAll().then(({ data }) => {
      this.categories = data.data.categories;
    });

    // Init filestack.
    this.filestack = init(FILESTACK_KEY || '');
  }

FILE_PICKER_API_KEY,
  FILE_PICKER_CNAME,
  FILE_PICKER_FROM_SOURCES,
  FILE_PICKER_SUBMISSION_CONTAINER_NAME, PROJECT_ATTACHMENTS_FOLDER
} from '../../config/constants'
import BtnRemove from '../../assets/icons/ui-16px-1_trash-simple.svg'
import _ from 'lodash'
import { withRouter } from 'react-router-dom'
import { createTopicAttachment } from '../../api/messages'

export const NEW_POST_STEP = {
  STATUS: 'STATUS',
  COMMENT: 'COMMENT'
}

const fileUploadClient = filepicker.init(FILE_PICKER_API_KEY, {
  cname: FILE_PICKER_CNAME
})

// we need it to calulate body height based on the actual mobile browser viewport height
const HEADER_HEIGHT = 50

class NewPostMobile extends React.Component {
  constructor(props) {
    super(props)

    const projectId = props.match.params.projectId
    this.state = {
      step: props.step,
      statusValue: '',
      commentValue: '',
      browserActualViewportHeigth: document.documentElement.clientHeight,

constructor(props) {
    super(props);
    const {
      apikey,
      clientOptions,
      actionOptions,
      action,
      componentDisplayMode,
    } = this.props;
    const defaultComponentDisplayMode = {
      type: 'button',
      customText: 'Pick file',
      customClass: 'filestack-react',
    };
    const client = filestack.init(apikey, clientOptions);
    this.state = {
      client,
      picker: action === 'pick' ? client.picker({ ...actionOptions, onUploadDone: this.onFinished }) : null,
      componentDisplayModeMerged: { ...defaultComponentDisplayMode, ...componentDisplayMode },
    };
    this.onFinished = this.onFinished.bind(this);
    this.onFail = this.onFail.bind(this);
  }

...extractAttachmentLinksFromPosts(feeds),
      ...extractAttachmentLinksFromPosts(phaseFeeds)
    ]

    const assetsData = []
    enableFileUpload && assetsData.push({name: 'Files', total: _.toString(attachments.length)})
    !hideLinks && assetsData.push({name: 'Links', total: _.toString(links.length)})

    let activeAssetsType
    if (this.state.activeAssetsType) {
      activeAssetsType = this.state.activeAssetsType
    } else if (assetsData.length > 0) {
      activeAssetsType = assetsData[0].name
    }

    const fileUploadClient = filepicker.init(FILE_PICKER_API_KEY, {
      cname: FILE_PICKER_CNAME
    })
    const processUploadedFiles = (fpFiles, category) => {
      const attachments = []
      this.onAddFile(false)
      fpFiles = _.isArray(fpFiles) ? fpFiles : [fpFiles]
      _.forEach(fpFiles, f => {
        const attachment = {
          title: f.filename,
          description: '',
          category,
          size: f.size,
          filePath: f.key,
          contentType: f.mimetype || 'application/unknown'
        }
        attachments.push(attachment)

const styles = [
  { className: 'bold', style: 'BOLD' },
  { className: 'italic', style: 'ITALIC' },
  { className: 'underline', style: 'UNDERLINE' }
]

const blocks = [
  { className: 'ordered-list', style: 'ordered-list-item' },
  { className: 'unordered-list', style: 'unordered-list-item' },
  { className: 'quote', style: 'blockquote' },
  { className: 'code', style: 'code-block' }
]

const fileUploadClient = filepicker.init(FILE_PICKER_API_KEY, {
  cname: FILE_PICKER_CNAME
})

class RichTextArea extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      editorExpanded: false,
      editorState: EditorState.createEmpty(),
      titleValue: '',
      suggestions: [],
      allSuggestions: [],
      isPrivate: false
    }

    this.onTitleChange = this.onTitleChange.bind(this)

});
      },
    },
  ],
};

const enhance = compose(
  withState('isOpen', 'setOpen', false),
  withPropsOnChange(['value'], ({ value }) => ({
    value: (Array.isArray(value) ? value : [value]).filter(x => !isEmpty(x)),
  })),
);

@enhance
class EditText extends Component {
  client = filestack.init('A2tR6xLUhRg23XWmrvRX0z');
  componentWillReceiveProps({ onChange, value, isOpen, setOpen, multi }) {
    if (this.props.isOpen !== isOpen && isOpen) {
      if (value.length && value[0].handle) {
        this.client.cropFiles(value.map(x => `https://cdn.filestackcontent.com/${x.originalHandle || x.handle}`), {
          fromSources:["url", "local_file_system","imagesearch","facebook","instagram","dropbox"],
          lang:"de"
        }).then(({ filesUploaded }) => Promise.all(filesUploaded.map((item, i) => this.client
          .metadata(item.handle, {
            width: true,
            height: true,
          })
          .then((res) => ({
            url: item.url,
            handle: item.handle,
            originalHandle: value[i].handle || item.handle,
            mime: item.mimetype,