> For the complete documentation index, see [llms.txt](https://filesquash.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://filesquash.gitbook.io/docs/widgets.md). # 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. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://filesquash.gitbook.io/docs/widgets.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.