# 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 \ ``` * 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 `` de seu site: ```markup ``` * 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 ```markup

``` ### Opções | Atributo | Valor padrão | Valores possíveis | Descrição | | ----------------------- | ------------ | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **data-fs-src** | | |

Este atributo define o endereço URL da imagem ou identificador único de imagem no Filesquash.
Esse atributo é obrigatório.

Este atributo define se a imagem será carregada no formato webp quando o navegador apresentar suporte.
A conversão para webp pode resultar em perda de qualidad das imagens.

| ## 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 ```markup

``` ### Opções | Atributo | Valor padrão | Valores possíveis | Descrição | | ----------------------- | ------------ | --------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **data-fs-bg** | | |

Este atributo define o endereço URL da imagem ou identificador único de imagem no Filesquash.
Esse atributo é obrigatório.

Este atributo define se a imagem será carregada no formato webp quando o navegador apresentar suporte.
A conversão para webp pode resultar em perda de qualidad das imagens.

| ## Widget de Upload ### Javascript (vanilla): ```markup ``` Para receber a URL de seu arquivo após o upload você deverá criar um listener para o evento `uploadCompleted`: ```javascript const widget = document.querySelector('widget'); widget.addEventListener( 'uploadCompleted', data => console.log(data) ) ``` Alternativamente você também pode escutar pelo evento `filesquash:uploadStarted` no `document` ```javascript document.addEventListener('filesquash:uploadCompleted', () => { console.log('filesquash:uploadStarted') }); ``` Caso queira acionar programaticamente o widget de upload do Filesquash, utilize o `` e chame o método `toggleModal()` para exibir ou esconder o widget. ```markup ``` ### Opções | Atributo | Valor padrão | Descrição | | ---------------------- | ----------------------------------- | ----------------------------------------------------------------------------------------- | | **multiple** | `false` | Este atributo define se o usuário pode selecionar mais de um arquivo de forma simultânea. | | **button-text** | `"Selecionar arquivos"` | Este atributo define o texto do botão de abertura do modal do widget. | | **label-text** | `"Arraste/solte seu arquivo aqui."` | Este atributo define o texto da caixa de seleção de arquivos do widget. | | **upload-button-text** | `"Enviar"` | Este atributo define o texto do botão que realiza o upload dos arquivos do widget. | ### 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. ```jsx 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 ( ) } } ``` Usando o wrapper: ```jsx console.log(data)} buttonText='Upload new files' /> ``` ps.: Em breve disponibilizaremos esse wrapper como um pacote no NPM.