VsUpload

src/components/upload/Upload.vue + src/components/upload/ViewUpload.vue

Form High 23 usos

Componente completo de upload de arquivos com preview de imagens, barra de progresso por arquivo e global, suporte a múltiplos arquivos com limite configurável, validação de tamanho, legenda por imagem com emoji picker (emoji-mart-vue), e viewer fullscreen (ViewUpload). Dois modos de layout: simples (thumbnails + drop zone) e expandido 50/50 (preview grande + legenda à esquerda, grid à direita — ativo quando multiple=true AND limit != 500 AND !isInternalChatMessage AND !isIosDevice).

Tag no template: <upload> ou <Upload>, NUNCA <vs-upload>. O componente é importado e registrado localmente em todos os 23 usos. Padrão universal: automatic=true + singleUpload=true + fileName="file".

Arquivo Único

limit=1 + automatic=true + singleUpload=true. Padrão para upload de imagem de perfil, logo, ou mídia de template. maxSize e maxImageSize são props separadas — definir ambas quando há restrição de tamanho. @on-upload-start limpa o preview anterior.

Estado vazio

Adicionar Imagem

Arquivo selecionado + upload concluído

✓

Maximum of files reached

<upload
  automatic
  fileName="file"
  ref="uploadComponent"
  text="Adicionar Imagem"
  accept=".jpg, .jpeg, .gif, .jfif, .mpeg, .png, .web, .webp"
  :limit="1"
  :single-upload="true"
  :maxSize="maxImageSize"
  :maxImageSize="maxImageSize"
  :action="uploadApiUrl"
  :headers="{ Authorization: 'Bearer ' + bearer }"
  @on-success="successUploadImage"
  @on-error="errorUploadImage"
  @on-upload-start="imageUrl = null"
/>

Múltiplos Arquivos (modo expandido)

Modo expandido 50/50 — ativo quando multiple=true AND limit != 500 AND !isInternalChatMessage AND !isIosDevice. Esquerda: preview grande da imagem selecionada + input de legenda + emoji picker. Direita: grid de thumbnails + drop zone.

Selecionar Anexo

<upload
  :action="uploadApiUrl"
  fileName="file"
  :headers="{ Authorization: 'Bearer ' + bearer }"
  text="Selecionar Anexo"
  automatic
  :limit="newChat ? 1 : 10"
  :multiple="true"
  :maxImageSize="maxImageSize"
  :single-upload="true"
  :is-instagram="isInstagram"
  :is-messenger="isMessenger"
  @on-success="successUploadImage"
  @change-caption="watchImageCaption"
  @on-error="errorUploadImage"
  @on-delete="deleteUploadImage"
  ref="uploadComponent"
  class="chat-upload-image-popup"
/>

Chat Interno (isInternalChatMessage)

isInternalChatMessage=true desativa o layout expandido e reduz o tamanho dos thumbnails — essencial no chat interno para não ocupar espaço excessivo. Sem @change-caption — chat interno não suporta legendas.

doc.pdf

Escolher Documento

<Upload
  ref="uploadComponentImage"
  class="internal-chat-upload-image-popup"
  :action="uploadApiUrl"
  :headers="{Authorization: 'Bearer ' + bearer}"
  :limit="10"
  :isInternalChatMessage="true"
  :multiple="true"
  :single-upload="true"
  :text="'Escolher Documento'"
  automatic
  fileName="file"
  @on-success="successUploadFile"
  @on-error="errorUploadFile"
  @on-delete="deleteUploadFile"
/>

Upload de Mídia para Template

accept calculado dinamicamente a partir do tipo do header do template (IMAGE, VIDEO, DOCUMENT). limit=1 + singleUpload + automatic — padrão para inputs de upload dentro de popups de seleção de template.

Selecione Imagem

accept: .jpg, .jpeg, .png, .gif

<upload
  :action="uploadApiUrl"
  fileName="file"
  :headers="{Authorization: 'Bearer ' + bearer}"
  ref="uploadComponent"
  :text="`Selecione ${headerFormatLabel}`"
  :accept="headerFormatAccept"
  automatic
  :limit="1"
  :maxSize="10"
  :single-upload="true"
  @on-error="errorUpload"
  @on-delete="removeUpload"
  @on-success="successUpload"
/>

Sem Botão de Upload (controle externo)

showUploadButton=false oculta os botões de upload — o pai chama $refs.uploadComponent.upload('all') manualmente. Padrão para flows com confirmação antes do envio. Nota: sem uso real — todos os usos reais usam automatic=true.

relatorio.xlsx

Selecionar Arquivo

Upload disparado pelo pai: $refs.uploadComponent.upload('all')

<!-- Exemplo sintético — showUploadButton=false sem uso real encontrado -->
<upload
  :action="uploadApiUrl"
  fileName="file"
  :headers="{ Authorization: 'Bearer ' + bearer }"
  :showUploadButton="false"
  :multiple="true"
  :limit="5"
  ref="uploadComponent"
  @on-success="onUploadSuccess"
  @on-error="onUploadError"
  @on-delete="onFileDeleted"
/>
<!-- Para disparar o upload externamente: -->
<!-- this.$refs.uploadComponent.upload('all') -->

Com Dados Extras no FormData

Prop data envia campos adicionais junto com o arquivo no FormData — útil para associar o upload a um registro (orderId, type). Sem uso real no admin.

FormData enviado:

file: [arquivo selecionado]
orderId: "ORD-123456" (via prop data)
type: "attachment" (via prop data)

<!-- Exemplo sintético — prop data= sem uso real encontrado no admin -->
<upload
  :action="uploadApiUrl"
  fileName="file"
  :headers="{ Authorization: 'Bearer ' + bearer }"
  :data="{ orderId: order.id, type: 'attachment' }"
  automatic
  :limit="1"
  @on-success="onUploadSuccess"
  @on-error="onUploadError"
/>

API

<!-- Padrão universal: automatic + singleUpload + fileName="file" -->
<upload
  :action="uploadApiUrl"
  fileName="file"
  :headers="{ Authorization: 'Bearer ' + bearer }"
  text="Selecionar Arquivo"
  automatic
  :limit="10"
  :multiple="true"
  :single-upload="true"
  :maxSize="10"
  :maxImageSize="10"
  ref="uploadComponent"
  @on-success="successUpload"
  @on-error="errorUpload"
  @on-delete="deleteUpload"
  @change-caption="watchCaption"
  @on-upload-start="onUploadStart"
/>

Props

Nome	Tipo	Default	Obrig.	Descrição
`fileName`	String	`null`	—	Nome do campo no FormData. Obrigatório quando `action` é definido.
`text`	String	`"Upload File"`	—	Texto exibido na zona de drop.
`textMax`	String	`"Maximum of files reached"`	—	Texto quando limite é atingido.
`limit`	Number\|String	`null`	—	Máximo de arquivos. `500` = desativa modo expanded.
`action`	String	`null`	—	URL para upload via axios. Sem ela, gerencia arquivos localmente.
`headers`	Object	`null`	—	Headers HTTP adicionais (ex: `Authorization`).
`data`	Object	`null`	—	Dados extras adicionados ao FormData junto com o arquivo.
`automatic`	Boolean	`false`	—	Upload automático ao selecionar. Todos os usos reais usam `true`.
`multiple`	Boolean	`false`	—	Múltiplos arquivos. Ativa modo expanded quando combinado com `limit != 500`.
`showUploadButton`	Boolean	`true`	—	Exibe botões de upload por arquivo e "upload all".
`singleUpload`	Boolean	`false`	—	Uma requisição por arquivo (vs. todos juntos).
`maxSize`	Number	`10`	—	Tamanho máximo em MB para não-imagens.
`maxImageSize`	Number	`10`	—	Tamanho máximo em MB para imagens. Prop separada de `maxSize`.
`isInternalChatMessage`	Boolean	`false`	—	Desativa modo expanded e reduz thumbnails.
`isInstagram`	Boolean	`false`	—	Restringe tipos e tamanhos da API Instagram (8MB imagens, 25MB outros).
`isMessenger`	Boolean	`false`	—	Mesmas restrições do Instagram.

Eventos

Nome	Payload	Descrição
`change`	`(inputValue, filesx)`	Ao selecionar arquivos.
`update:vsFile`	String	Compatível com `.sync`.
`on-success`	AxiosResponse + `{ srcs }`	Upload concluído com sucesso.
`on-error`	Object \| AxiosError	Erro no upload ou validação. Validação: `{ data: { message, time } }`.
`on-delete`	`{ method: 'number'\|'all', file? }`	Arquivo removido.
`on-upload-start`	—	Upload iniciado.
`change-caption`	Object	Legenda alterada ou upload `automatic+singleUpload` concluído. Payload varia: `{ data: itemsLoaded }` (digitação) ou AxiosResponse (upload).

Dependências

Vuesax: vs-row, vs-col, vs-input
Custom: ViewUpload (interno — viewer fullscreen), VsDropdown + VsDropdownMenu (emoji picker)
External: axios (upload HTTP), emoji-mart-vue/Picker (emoji picker — set apple, locale br, perLine 11)

Onde é usado

src/views/chat-attendance/Index.vue
src/layouts/components/internal-chat-message/InternalChatMessage.vue
src/layouts/components/internal-tenant-chat/InternalTenantChatMessage.vue
src/components/meta/SelectMessageTemplate.vue
src/components/stock-image-card/ViewStockImages.vue
+ 18 outros arquivos (23 usos totais)