Exemplo de utilização da "FileUploader"

Nesse exemplo ira entender como utilizar o componente "FileUploader".

Instalação

yarn add ui-maxxi-upload

Como importar

import { FileUploader, EMaxxiUploadType, FileData } from "ui-maxxi-upload";

Parametros do "FileUploader"

• handleFile (optional) - Função usada para sobrescrever a funcionalidade padrão de upload do botão (list: FileList) => {}.
• title - Titulo do botão de upload string.
• baseUrl - Url do serviço string.
• onUploaded (optional) - Função usada para receber os dados do arquivo salvo no servidor (listOfUploadFiles: Array<FileData>): void => {}.
• styledButton (optional) - Configuração de estilo para o componente styled.button.
• type (optional) - Expecifica a funcionalidade do botão.
  • S3_BY_SERVER - Faz o upload do arquivo para o S3 mas o front envia primeiro para o back e este para o S3.
  • S3_DIRECT - Faz o upload do arquivo direto para o S3 sem passar pelo back.
  • DEFAULT - Faz o upload do arquivo na pasta maxxi-upload no back.

Upload de arquivos para S3 através do servidor

Para fazer upload de um arquivo ao S3 enviando o arquivo primeiro para o 'service-maxxi-upload' e depois enviar para um bucket no S3.

<FileUploader
  baseUrl="https://demo-api.appsmaxxidata.com"
  title="Upload a file"
  type={EMaxxiUploadType.S3_BY_SERVER}
/>

Upload de arquivos ditero para S3

Para fazer upload de um arquivo direto para S3 sem necessidade de passar polo back.

const onUploaded = (listOfUploadFiles: Array<FileData>): void => {
  console.log(listOfUploadFiles);
};

<FileUploader
  baseUrl="https://demo-api.appsmaxxidata.com"
  type={EMaxxiUploadType.S3_DIRECT}
  title="Upload to S3"
  onUploaded={onUploaded}
/>

Upload de arquivos usando a função de upload customizada

const handleFile = (list: FileList) => {
  for (let index = 0; index < list.length; index++) {
    const file = list[index];
    const data = new FormData();
    data.append('maxxi-upload-file', file);
    fetch('https://demo-api.appsmaxxidata.com/upload', {
      method: 'POST',
      body: data,
    })
      .then(res => {
        console.log(res);
      })
      .catch(err => {
        console.error(err);
      });
  }
};

<FileUploader
  handleFile={handleFile}
  baseUrl=""
  title="Upload a file with handler"
/>

Customizando botão

1 - Usando styled components

import styled from 'styled-components';

const CustomButton = styled.button`
  background-color: black;
  color: white;
  font-size: 20px;
  padding: 10px 60px;
  border-radius: 5px;
  margin: 10px 0px;
  cursor: pointer;
`;

<FileUploader
  baseUrl="https://demo-api.appsmaxxidata.com"
  title="Upload a file"
  styledButton={CustomButton}
/>

1 - Usando CSS

.button-upload {
    color: #7396FF;
    border: none;
    background-color: transparent;
    padding: 0px;
    cursor: pointer;
}

.text-size-14 {
    font-size: 14px;
    font-family: Roboto;
    font-weight: 500;
    word-wrap: break-word;
}

<FileUploader
  baseUrl="https://demo-api.appsmaxxidata.com"
  title="Upload a file"
  className="button-upload text-size-14"
/>