Widgets

Filesquash widget is our major tool for web integrations. It’s provided as a typical Javascript library and can be easily embedded in your site. The widget is highly customizable to fit your needs.

Instalação

Via tag <script>

  • Adicione o seguinte código antes de fechar a tag <body> de seu site:

<script type="application/javascript">
  var filesquashConfig = {
    projectId: '[seu projectId]',
    token: '[seu token]'
  }
</script>
<script src='https://unpkg.com/filesquash-widget@0.4.4/dist/filesquash.js'></script>
  • Pronto. Agora você já pode usar os componentes em qualquer lugar no seu template, jsx, html, etc.

NPM

  • Rode npm install filesquash-widget --save

  • Adicione um código similar ao a seguir antes de fechar a tag <body> de seu site:

<script type="application/javascript">
  var filesquashConfig = {
    projectId: '[seu projectId]',
    token: '[seu token]'
  }
</script>
<script src='node_modules/filesquash-widget/dist/filesquash.js'></script>
  • Pronto. Agora você já pode usar os componentes em qualquer lugar no seu template, jsx, html, etc.

Widget de imagens

O widget de imagens do Filesquash permite que você tenha imagens automaticamente responsivas em seu site com o mínimo de esforço possível. Além disso, também é possível aplicar uma grande quantidade de efeitos efeitos, como blur, grayscale, watermark, etc..

Exemplo de uso

<img
  data-fs-src="https://mysite.com/images/image.jpg"
  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8+f9vPQAJZAN2rlRQVAAAAABJRU5ErkJggg=="
/>

Opções

Widget de imagens em background

O widget de imagens do Filesquash também permite que você tenha imagens em background automaticamente responsivas.

Exemplo de uso

<div
  data-fs-bg="https://mysite.com/images/image.jpg"
  style="width:100%; height: 500px;"
></div>

Opções

Widget de Upload

Javascript (vanilla):

<filesquash-widget id="widget"></filesquash-widget>

Para receber a URL de seu arquivo após o upload você deverá criar um listener para o evento uploadCompleted:

const widget = document.querySelector('widget');
widget.addEventListener(
  'uploadCompleted',
  data => console.log(data)
)

Alternativamente você também pode escutar pelo evento filesquash:uploadStarted no document

document.addEventListener('filesquash:uploadCompleted', () => {
  console.log('filesquash:uploadStarted')
});

Caso queira acionar programaticamente o widget de upload do Filesquash, utilize o <filesquash-modal> e chame o método toggleModal() para exibir ou esconder o widget.

<button onclick="showModal()">Exibir modal</button>
<filesquash-modal token="YOUR_TOKEN" id="modal"></filesquash-modal>

<script>
  const modalElm = document.querySelector('#modal');

  function showModal() {
    modalElm.componentOnReady()
      .then(() => {
        modalElm.toggleModal();
      });
  }
</script>

Opções

Utilizando o widget de upload com o React:

Para usar o widget de upload no React você precisará criar um wrapper como o apresentado a seguir.

import React, { Component } from 'react'
import kebabCase from 'lodash/kebabCase'

export class UploadWidget extends Component {
  constructor(props) {
    super(props)

    this.onUploadComplete = this.onUploadComplete.bind(this)
  }

  componentDidMount () {
    this.component.addEventListener('uploadCompleted', this.onUploadComplete)
  }

  componentWillUnmount () {
    this.component.removeEventListener('uploadCompleted', this.onUploadComplete)
  }

  onUploadComplete (data) {
    this.props.onComplete(data)
  }

  _handleRef = (component) => {
    this.component = component
  };

  render () {
    const newProps = {
      ...Object.keys(this.props).reduce((accumulator, key) => ({
        ...accumulator,
        [kebabCase(key)]: this.props[key]
      }), {})
    }

    return (
      <filesquash-widget
        {...newProps}
        ref={this._handleRef}
      />
    )
  }
}

Usando o wrapper:

<UploadWidget
  token={this.state.info.api_token}
  onComplete={(data) => console.log(data)}
  buttonText='Upload new files'
/>

ps.: Em breve disponibilizaremos esse wrapper como um pacote no NPM.

Last updated