Pular para o conteúdo
Camaleo
PT · ENGitHub
// visualizar em
salvo em todas as páginas

Envio de arquivos

Envio de arquivos — uma área para soltar arquivos com um input de arquivo de verdade atrás de um botão, mais uma lista com o progresso, o resultado ou o erro de cada arquivo. Ela entrega os arquivos; enviar é com o seu app.

Feito com HTMLPadrão Native file input + role=groupComponente clienteCódigo ↗
minimal · light · #3fa34d

Arraste arquivos ou escolha no computador

PDF, PNG ou JPG até 10 MB

multiple
disabled

Instalação

Configure o Camaleo uma vez (Instalação) e importe a área e a lista.

import { Dropzone, FileList, FileItem } from "@camaleo/react";

Anatomia

O Dropzone é um grupo com nome e um botão que abre o seletor de arquivos. Cada FileItem de um FileList tem ícone, nome, barra de progresso ou linha de detalhes, e as suas ações.

íconetítulodescriçãoEscolher arquivosrelatorio-3tri.pdf · 64%
[data-slot="dropzone"] · [data-slot="file-list"] · [data-slot="file-item"][data-slot="dropzone-icon"] · [data-slot="dropzone-title"] · [data-slot="dropzone-description"] · botão[data-slot="file-item-name"] · [data-slot="file-item-meta"] · progresso

Exemplos

Cada exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor escolhidos na barra acima. Nada sai do seu navegador: os envios são simulados com timers.

minimal · light · #3fa34d

Arraste arquivos ou escolha no computador

PDF, PNG ou JPG até 10 MB

    Adicione fotos do produto

    PNG ou JPG até 2 MB cada

      Tipos e limite de tamanho

      Solte um PDF ou uma foto grande. O accept e o maxSize separam os arquivos, o onFilesRejected diz o motivo de cada um, e uma linha de status anuncia o resultado.

      Arraste arquivos ou escolha no computador

      PDF, PNG ou JPG até 10 MB

      • capa.png
        Enviado · 1,2 MB

      Progresso, cancelar e remover

      Adicione um arquivo. Guarde o estado do envio você mesmo e passe para status, progress e meta; a barra leva o nome do arquivo.

      • ata-conselho.docx
        Pronto para enviar · 0,8 MB
      • relatorio-3tri.pdf64% · 2,4 de 3,8 MB
        x
      • capa.png
        Enviado · 1,2 MB
      • tour-do-site.mov

        Maior que 10 MB. Corte o vídeo ou compartilhe um link.

      Todos os status

      O status comanda a linha: idle antes do envio, uploading com barra, done com check, error com a mensagem.

      • extrato-setembro.pdf

        A conexão caiu em 48%. Seu arquivo continua aqui.

      Tentar de novo após erro

      Clique em tentar de novo. A linha com falha guarda o arquivo e oferece o próximo passo, então ninguém precisa buscar o arquivo na pasta outra vez.

      Envie seu logotipo

      SVG, PNG ou JPG até 5 MB

      Uma imagem

      Com multiple={false} só o primeiro arquivo é entregue, e escolher de novo substitui; a linha mostra nome, tipo e tamanho.

      • contrato-locacao-assinado.pdfVerificando vírus…
        x

      Progresso desconhecido

      Quando o servidor não consegue medir (antivírus, conversão), passe progress={null} e diga no meta o que está acontecendo.

      Arraste arquivos ou escolha no computador

      Armazenamento cheio: 15 GB de 15 GB usados. Apague arquivos antigos ou mude de plano.

      Desativado, com motivo

      O disabled ignora arquivos soltos e desativa o botão. Use a descrição para dizer o motivo e o que fazer.

      Em contexto

      Enviar arquivos é parte de uma tarefa. São pedaços inteiros de interface para copiar, no estilo que você escolheu.

      Novo chamado de suporte

      Costumamos responder em até 4 horas úteis.

      Anexe prints ou logs

      PNG, JPG, PDF ou TXT até 10 MB

      • erro-checkout.png
        0,4 MB
      Anexos de um chamadoCard · Field · Input · Textarea · Dropzone · FileList · IconButton

      Foto do perfil

      Aparece ao lado dos seus comentários e no diretório do time.

      AS
      Ana Souza
      Designer de produto

      Solte uma foto ou escolha

      PNG ou JPG quadrado até 2 MB

      Foto do perfilCard · Avatar · Dropzone · FileItem · Button

      Importar contatos

      Envie um CSV exportado do seu CRM. Colunas: nome, e-mail, empresa.

      Solte seu arquivo CSV

      CSV até 20 MB, um contato por linha

      Importar contatos de CSVCard · Dropzone · FileItem · Button

      Boas práticas

      Arraste arquivos ou escolha

      PDF, PNG ou JPG até 10 MB

      FaçaDiga os tipos e o limite.

      A pessoa confere antes de arrastar, e nenhum arquivo é recusado de surpresa.

      Solte os arquivos aqui

      EviteÁrea de soltar sem nada.

      As regras existem do mesmo jeito; a pessoa só descobre quando um arquivo falha.

      • tour-do-site.mov

        Maior que 10 MB. Corte o vídeo ou compartilhe um link.

      FaçaDiga como corrigir.

      O erro diz o limite e a saída, bem no arquivo.

      • tour-do-site.mov

        Falha no envio.

      EviteErro genérico.

      "Falha no envio." faz a pessoa tentar o mesmo arquivo de novo.

      Props

      PropriedadeTipoPadrãoDescrição
      titleReactNode—O título da área; também dá nome ao grupo.
      descriptionReactNode—Tipos aceitos e tamanho, em palavras ("PNG, JPG ou PDF até 10 MB").
      buttonLabelReactNode"Choose files"Texto do botão que abre o seletor de arquivos.
      iconReactNode—Substitui o ícone de envio.
      acceptstring—Mesma sintaxe do <input accept>: extensões, tipos MIME, image/*.
      multiplebooleantrueAceita vários arquivos de uma vez; com false, só o primeiro é entregue.
      maxSizenumber—Maior arquivo aceito, em bytes.
      disabledbooleanfalseIgnora arquivos soltos e desativa o botão.
      onFilesAccepted((files: File[]) => void)—Recebe os arquivos que passam no accept e no maxSize.
      onFilesRejected((rejections: FileRejection[]) => void)—Recebe os arquivos recusados, cada um com reason: "type" | "size".

      Estas são as props do Dropzone; os children aparecem entre a descrição e o botão. Uma recusa é { file, reason: "type" | "size" }. O FileList recebe os atributos de <ul>; dê um aria-label a ele.

      O FileItem mostra um arquivo:

      PropriedadeTipoPadrãoDescrição
      name*ReactNode—O nome do arquivo. Também dá nome à barra de progresso.
      metaReactNode—Tamanho, texto de progresso ou status ("64% · 2,4 de 3,8 MB", "Enviado · 1,2 MB").
      status"done" | "error" | "idle" | "uploading""idle"uploading mostra a barra; done adiciona um check; error mostra o error.
      progressnumber | nullnullDe 0 a 100 durante o envio; null é indeterminado.
      errorReactNode—Mensagem mostrada com status="error".
      iconReactNode—Substitui o ícone de arquivo (o de perigo, no erro).
      actionsReactNode—Botões no fim da linha (cancelar, remover, tentar de novo). Dê nome a eles com o arquivo.

      Outros atributos de <li> também são aceitos.

      Styling hooks

      Mude o visual sem copiar o componente: use os atributos ou defina os tokens num elemento pai, num estilo ou na própria área.

      Atributos

      data-slot"dropzone" · "dropzone-icon" · "dropzone-title" · "dropzone-description" · "file-list" · "file-item" · "file-item-icon" · "file-item-body" · "file-item-header" · "file-item-name" · "file-item-meta" · "file-item-error"
      data-draggingno dropzone enquanto arquivos são arrastados sobre ele
      data-disabledno dropzone quando desativado
      data-status"idle" · "uploading" · "done" · "error", em cada item

      Tokens que ele lê

      Cor

      --cml-accent-text--cml-border--cml-border-control--cml-danger--cml-fg--cml-fg-muted--cml-fg-secondary--cml-file-icon-fg--cml-file-item-bg--cml-file-item-border--cml-file-item-shadow--cml-focus-ring--cml-radius-surface--cml-surface-raised

      Forma e tamanho

      --cml-file-icon-radius--cml-file-item-radius--cml-font-size-field--cml-font-size-help--cml-radius-control--cml-radius-pill--cml-radius-popover

      Tipografia e movimento

      --cml-duration-fast--cml-ease-standard--cml-font-label--cml-font-weight-label--cml-tone-line

      Só deste componente

      --cml-corner-shape--cml-disabled-opacity--cml-dropzone-border--cml-dropzone-icon-bg--cml-dropzone-icon-border--cml-dropzone-icon-fg--cml-dropzone-icon-shadow--cml-dropzone-radius--cml-dropzone-shadow--cml-tone-soft

      Acessibilidade

      TabLeva o foco ao botão dentro da área.
      Enter / EspaçoAbre o seletor de arquivos do sistema.
      Tab (na lista)Passa pelas ações de cada arquivo.

      Relacionados

      ProgressBarra para qualquer tarefa com progresso conhecido.FieldRótulo, descrição e erro para qualquer controle.Error summaryListe todos os erros no topo de um formulário longo.
      Esta página foi útil? · Editar esta página no GitHub