CMS: adicionar e configurar um botão Upload

8 min de leitura
Crie um botão de upload para permitir que os visitantes do site enviem arquivos diretamente para as coleções do seu CMS. Escolha os tipos de arquivos que você deseja aceitar, como documentos, imagens, vídeos e áudio. Os arquivos carregados são armazenados com segurança em sua coleção para você gerenciar. 
Antes de começar:
Recomendamos que você se familiarize com formulários personalizados, que são uma ótima maneira de coletar informações dos visitantes. 
Uma captura de tela de um formulário personalizado que inclui um botão de upload e um botão de envio.

Etapa 1 | Adicione e conecte o botão de upload

Primeiro, adicione um botão que você gostaria de usar como botão "upload". Esse é o botão que os visitantes clicam para selecionar o arquivo que eles desejam fazer upload. 

Você também precisa conectar o botão a um conjunto de dados que se conecta à coleção na qual você vai armazenar os arquivos carregados. Certifique-se de que a coleção escolhida tenha as permissões corretas. Recomendamos escolher Envios de formulário nas Configurações de permissões e privacidade para permitir que qualquer pessoa adicione conteúdo.
Nova experiência com conjuntos de dados:
No Wix Studio, movemos conjuntos de dados para o painel Inspetor localizado à direita para torná-los mais fáceis de usar. Saiba mais sobre a nova experiência com conjuntos de dados no Wix Studio

Para adicionar e conectar o botão de upload:

  1. Vá para o painel Adicionar:
    • Editor Wix: clique em Elementos no lado esquerdo do Editor.
    • Editor X: clique em Elementos na parte superior do Editor X.
  2. Clique em Entrada e clique em Botão Upload.
  3. Selecione um botão e arraste-o para o seu site.
  4. Clique no botão na sua página.
  5. Clique no ícone Conectar aos dados  (ou no Editor X).
  6. Clique em Criar conjunto de dados.
  7. Clique no dropdown Escolha uma coleção e selecione a coleção na qual seus visitantes farão upload dos arquivos.
    Dica: clique no dropdown Escolha uma coleção e selecione Criar coleção para criar uma nova coleção na qual seus visitantes farão upload dos arquivos. 
  8. (Opcional) Insira um nome para seu conjunto de dados no campo Nome do conjunto de dados.
  9. Clique em Criar.
  10. Clique no dropdown Arquivo se conecta a e selecione o campo ao qual deseja conectar o botão de upload.
    Dica: clique em Adicionar novo campo se quiser conectar o botão de upload a um novo campo na sua coleção. Em seguida, insira um Nome do campo, selecione o Tipo de campo e clique em Adicionar
Uma captura de tela de um botão de upload mostrando o painel Conectar botão de upload.

Etapa 2 | Configure e crie o design do botão de upload

Em seguida, escolha o tipo de arquivo que você deseja que os visitantes carreguem, juntamente com outras opções nas configurações do botão. Você pode personalizar o layout e o design do botão para que ele fique do jeito que você preferir. 

Para configurar e criar o design do seu botão de upload:

  1. Clique no botão de upload na sua página. 
  2. Clique no ícone Configurações  e escolha uma das seguintes opções: 
    • Configurações de upload: escolha quais tipos de arquivo você deseja que os visitantes possam carregar, escolha o número máximo de arquivos para upload e defina o campo como obrigatório (opcional). 
    • Opções de exibição: personalize as seguintes opções:
      • Título do campo: (recomendado) insira o título que aparece acima do texto do botão. 
      • Texto do botão: edite o texto que aparece no próprio botão. 
      • Texto abaixo do botão: escolha o que você deseja exibir abaixo do botão:
        • Mostrar só dados do arquivo: exiba o nome do arquivo que o visitante carregar. 
        • Mostrar texto personalizado: insira o texto personalizado que deseja exibir abaixo do botão, como requisitos do arquivo. Esse texto muda para o nome do arquivo após o upload. 
    • Arquivos do visitante: clique em Ver arquivos para ir para a pasta Uploads de visitantes no Gerenciador de Mídia. 
Uma captura de tela das configurações do botão de upload.
  1. Clique no ícone Layout  para alterar a posição do texto e do ícone, o alinhamento do texto ou o espaçamento entre o campo e o título do campo. 
  2. Clique no ícone Design  e escolha um botão predefinido. Clique em Personalizar design para personalizar ainda mais o design do botão.
Uma captura de tela de um botão de upload mostrando o painel Design do botão.

Etapa 3 | Adicione e configure um botão de envio

Você precisa de um botão "Enviar" em que os visitantes cliquem para concluir o envio de seus arquivos. Adicione outro botão para transformá-lo em seu botão Enviar. Em seguida, configure e conecte o botão Enviar ao mesmo conjunto de dados que o botão de upload. 

Para adicionar e configurar o botão de envio:

  1. Vá para o painel Adicionar:
    • Editor Wix: clique em Elementos no lado esquerdo do Editor.
    • Editor X: clique em Elementos na parte superior do Editor X.
  2. Clique em Botão.
  3. Selecione um botão e arraste-o para a página.
  4. Clique em Alterar texto e ícone e digite "Enviar" no campo Qual o conteúdo dele?
    Dica: certifique-se de que o dropdown O que o botão mostra? esteja definido como Apenas texto ou Texto e ícone, a menos que você não queira exibir um texto no botão de envio.
Uma captura de tela das configurações do botão de envio.
  1. Clique no ícone Conectar aos dados   (ou  no Editor X).
  2. Certifique-se de que o dropdown Conectar um conjunto de dados esteja definido para o conjunto de dados que você conectou na etapa 1. 
  3. Clique no dropdown A ação do clique conecta-se a e selecione Enviar.
  4. (Opcional) Adicione uma mensagem de sucesso que aparece quando os visitantes terminam de fazer upload de seus documentos:
    1. Clique em + Adicionar mensagem de sucesso.
    2. Selecione a mensagem de sucesso no seu Editor e edite a mensagem.
    3. Clique e arraste a mensagem de sucesso para o local onde deseja que ela apareça.
  5. (Opcional) Adicione uma mensagem de falha que aparece se houver falha no upload do documento:
    1. Selecione o botão enviar e clique no ícone Conectar aos dados  (ou no Editor X).
    2. Clique em + Adicionar mensagem de falha.
    3. Selecione a mensagem de falha no seu Editor e edite a mensagem.
    4. Clique e arraste a mensagem de falha para o local onde deseja que ela apareça. Você pode sobrepor essa mensagem com a mensagem de sucesso porque ambas não serão exibidas ao mesmo tempo. 
  6. Clique no dropdown Quando bem sucedido, ir para e selecione uma opção:
    • Ficar nessa página: o visitante permanece nessa página depois de enviar o formulário.
    • Um link: o visitante é redirecionado para outra página após enviar o formulário. Clique em Escolher em Escolha um link e configure o link. 

Quer que os visitantes possam fazer o download desses arquivos?
Você pode permitir que os visitantes façam download de arquivos da sua coleção ao adicionar um elemento de entrada, como um botão, ao seu site. Conecte o botão usando o ícone Conectar aos dados  (ou no Editor X), para o campo em que esses arquivos são armazenados. Quando terminar, se alguém clicar no botão conectado, o download do arquivo será feito na hora.

Esse artigo foi útil?

|