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 --saveAdicione 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
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.
data-fs-progressive
true
true ou false
Este atributo define se a imagem será carregada de forma progressiva usando placeholder de baixa resolução (LQIP).
data-fs-auto-webp
false
true ou false
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
<div
data-fs-bg="https://mysite.com/images/image.jpg"
style="width:100%; height: 500px;"
></div>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.
data-fs-size
"w_auto"
"default", "h_auto", "w_auto" e mais
Este atributo especifica o tamanho desejado da imagem.
data-fs-progressive
true
true ou false
Este atributo define se a imagem será carregada de forma progressiva usando placeholder de baixa resolução (LQIP).
data-fs-auto-webp
false
true ou false
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):
<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
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.
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