Accessibility: Partial

Translations: Not Needed

Upload

A versatile component that supports drag-and-drop or button-triggered file uploads.

Draggable Upload (Default)

Click to upload

or drag and drop

Tech design requirements.pdf

<1 KB

Tech design requirements.pdf

<1 KB

Tech design requirements.pdf

<1 KB

50%

Tech design requirements.pdf

Failed to upload

Vue-ts

html

<template>
  <HLUpload v-model:file-list="fileList" @change="handleChange"> </HLUpload>
</template>
<script setup lang="ts">
  import { HLUpload } from '@platform-ui/highrise'
  import { UploadCloud01Icon } from '@gohighlevel/ghl-icons/24/outline'

  const handleChange = data => {
    console.log('Files changed:', data)
  }

  const fileList = ref([
    {
      id: 'a',
      name: 'Tech design requirements.pdf',
      status: 'pending',
      type: 'image/jpeg',
      url: 'https://storage.googleapis.com/msgsndr/Vnhvoz8w8g7iFEFz37aq/media/640572bf27f37128ce68dcd2.jpeg',
    },
    {
      id: 'b',
      name: 'Tech design requirements.pdf',
      status: 'finished',
      type: 'video/mp4',
      url: 'https://storage.googleapis.com/msgsndr/Vnhvoz8w8g7iFEFz37aq/media/ab8d4d61-33a6-48be-a56b-df60693544ae.jpeg',
    },
    {
      id: 'c',
      name: 'Tech design requirements.pdf',
      status: 'uploading',
      percentage: 50,
      type: 'application/pdf',
      url: 'https://storage.googleapis.com/msgsndr/Vnhvoz8w8g7iFEFz37aq/media/6396e0f2b5d8bd0ff06eb0df.jpeg',
    },
    {
      id: 'd',
      name: 'Tech design requirements.pdf',
      status: 'error',
      type: 'zip',
      percentage: 50,
    },
  ])
</script>

Custom Content

Click or Drag and Drop

Tech design requirements.pdf

<1 KB

Tech design requirements.pdf

<1 KB

Tech design requirements.pdf

<1 KB

50%

Tech design requirements.pdf

Failed to upload

Vue

html

<template>
  <HLUpload v-model:file-list="fileList" @change="handleChange">
    <template #icon>
      <Upload01Icon class="w-4 h-4 mr-2" />
    </template>
    <template #extra>
      <HLText size="md" weight="medium" class="text-blue-600">Click or Drag and Drop</HLText>
    </template>
  </HLUpload>
</template>
<script setup>
  import { HLUpload, HLText } from '@platform-ui/highrise'
  import { Upload01Icon } from '@gohighlevel/ghl-icons/24/outline'
  import { ref } from 'vue'

  const fileList = ref([
    {
      id: 'a',
      name: 'Tech design requirements.pdf',
      status: 'pending',
      type: 'image/jpeg',
      url: 'https://storage.googleapis.com/msgsndr/Vnhvoz8w8g7iFEFz37aq/media/640572bf27f37128ce68dcd2.jpeg',
    },
  ])

  const handleChange = data => {
    // your logic here
  }
</script>

By File Manager (Button Upload)

set the type prop to button

Tech design requirements.pdf

<1 KB

Tech design requirements.pdf

<1 KB

Tech design requirements.pdf

<1 KB

50%

Tech design requirements.pdf

Failed to upload

Vue

html

<template>
  <HLUpload id="example-upload" v-model:file-list="fileList" :multiple="true" @change="handleChange" type="button">
    <template #buttonContent>
      <UploadCloud01Icon class="w-4 h-4 mr-2" />
      <span>Upload Multiple Images</span>
    </template>
  </HLUpload>
</template>
<script setup>
  import { HLUpload, HLText } from '@platform-ui/highrise'
  import { UploadCloud01Icon } from '@gohighlevel/ghl-icons/24/outline'
  import { ref } from 'vue'

  const fileList = ref([
    {
      id: 'a',
      name: 'Tech design requirements.pdf',
      status: 'pending',
      type: 'image/jpeg',
      url: 'https://storage.googleapis.com/msgsndr/Vnhvoz8w8g7iFEFz37aq/media/640572bf27f37128ce68dcd2.jpeg',
    },
  ])

  const handleChange = data => {
    // your logic here
  }
</script>

Accept (File Types)

Set the accept prop to specify the file types allowed for upload.

Click to upload

or drag and drop

Supported file types: .pdf,.jpeg,.png

Tech design requirements.pdf

<1 KB

Tech design requirements.pdf

<1 KB

Tech design requirements.pdf

<1 KB

50%

Tech design requirements.pdf

Failed to upload

Vue

html

<template>
  <HLUpload id="example-upload" v-model:file-list="fileList" :multiple="true" @change="handleChange" accept=".pdf,.jpeg,.png">
    <template #buttonContent>
      <UploadCloud01Icon class="w-4 h-4 mr-2" />
      <span>Upload Multiple Images</span>
    </template>
  </HLUpload>
</template>
<script setup>
  import { HLUpload, HLText } from '@platform-ui/highrise'
  import { UploadCloud01Icon } from '@gohighlevel/ghl-icons/24/outline'
  import { ref } from 'vue'

  const fileList = ref([
    {
      id: 'a',
      name: 'Tech design requirements.pdf',
      status: 'pending',
      type: 'image/jpeg',
      url: 'https://storage.googleapis.com/msgsndr/Vnhvoz8w8g7iFEFz37aq/media/640572bf27f37128ce68dcd2.jpeg',
    },
  ])

  const handleChange = data => {
    // your logic here
  }
</script>

File Handling

Click to upload

or drag and drop

Vue-ts

html

<template>
  <HLUpload v-model:file-list="fileListUpload" @change="handleUpload"> </HLUpload>
</template>
<script setup lang="ts">
  import { HLUpload } from '@platform-ui/highrise'
  import { UploadCloud01Icon } from '@gohighlevel/ghl-icons/24/outline'
  const fileListUpload = ref([])

  const handleUpload = data => {
    // simulating file upload - call actual upload API here and update the fileListUpload with the actual file info
    let progress = 0
    const interval = setInterval(() => {
      progress += 20
      fileListUpload.value = fileListUpload.value.map(file => ({
        ...file,
        status: progress >= 100 ? 'finished' : 'uploading',
        percentage: progress,
        url:
          progress >= 100 ? 'https://storage.googleapis.com/msgsndr/Vnhvoz8w8g7iFEFz37aq/media/640572bf27f37128ce68dcd2.jpeg' : undefined,
      }))

      if (progress >= 100) {
        clearInterval(interval)
      }
    }, 500)
  }
</script>

Multiple Upload

pass the multi prop or set it to true

Click to upload

or drag and drop

Tech design requirements.pdf

<1 KB

Tech design requirements.pdf

<1 KB

Tech design requirements.pdf

<1 KB

50%

Tech design requirements.pdf

Failed to upload

Vue

html

<template>
  <HLUpload id="example-upload" v-model:file-list="fileList" :multiple="true" @change="handleChange">
    <template #buttonContent>
      <UploadCloud01Icon class="w-4 h-4 mr-2" />
      <span>Upload Multiple Images</span>
    </template>
  </HLUpload>
</template>
<script setup>
  import { HLUpload, HLText } from '@platform-ui/highrise'
  import { UploadCloud01Icon } from '@gohighlevel/ghl-icons/24/outline'
  import { ref } from 'vue'

  const fileList = ref([
    {
      id: 'a',
      name: 'Tech design requirements.pdf',
      status: 'pending',
      type: 'image/jpeg',
      url: 'https://storage.googleapis.com/msgsndr/Vnhvoz8w8g7iFEFz37aq/media/640572bf27f37128ce68dcd2.jpeg',
    },
  ])

  const handleChange = data => {
    // your logic here
  }
</script>

Disabled Upload

Click to upload

or drag and drop

Tech design requirements.pdf

<1 KB

Tech design requirements.pdf

<1 KB

Tech design requirements.pdf

<1 KB

50%

Tech design requirements.pdf

Failed to upload

Vue

html

<template>
  <HLUpload id="example-upload-disabled" v-model:file-list="fileList" disabled @change="handleChange">
    <template #buttonContent>
      <UploadCloud01Icon class="w-4 h-4 mr-2" />
      <span>Upload Image</span>
    </template>
  </HLUpload>
</template>
<script setup>
  import { HLUpload, HLText } from '@platform-ui/highrise'
  import { UploadCloud01Icon } from '@gohighlevel/ghl-icons/24/outline'
  import { ref } from 'vue'

  const fileList = ref([
    {
      id: 'a',
      name: 'Tech design requirements.pdf',
      status: 'pending',
      type: 'image/jpeg',
      url: 'https://storage.googleapis.com/msgsndr/Vnhvoz8w8g7iFEFz37aq/media/640572bf27f37128ce68dcd2.jpeg',
    },
  ])

  const handleChange = data => {
    // your logic here
  }
</script>

Download Support

Set the :show-download-button prop to true to show the download button and
Then you can use the onDownload emitter to handle the download logic.

Click to upload

or drag and drop

Tech design requirements.pdf

<1 KB

VuetsVue

html

<HLUpload v-model:file-list="fileList" :show-download-button="true" :onDownload="handleDownload"> </HLUpload>

html

<script setup lang="ts">
  import { HLUpload } from '@platform-ui/highrise'
  import { ref } from 'vue'

  const downloadfileList = ref([
    {
      id: 'a',
      name: 'Tech design requirements.pdf',
      status: 'finished',
      type: 'application/pdf',
      url: 'https://storage.googleapis.com/msgsndr/Vnhvoz8w8g7iFEFz37aq/media/640572bf27f37128ce68dcd2.jpeg',
    },
  ])

  const handleDownload = file => {
    // your download logic here
    console.log('downloaded file ', file)
  }
</script>

Inline Upload

Set the inline prop to true to display the upload as an inline label with files listed as tags.

Attach Files

Tech design requirements.pdf

html

<template>
  <HLUpload id="example-inline-upload" v-model:file-list="fileList" :inline="true" @change="handleChange">
    <template #inlineUploadLabelIcon>
      <UploadCloud01Icon class="w-4 h-4" />
    </template>
    <template #inlineUploadLabelText>
      <HLText size="lg" weight="medium" class="text-gray-600">Attach Files</HLText>
    </template>
  </HLUpload>
</template>
<script setup>
  import { HLUpload } from '@platform-ui/highrise'
  import { UploadCloud01Icon } from '@gohighlevel/ghl-icons/24/outline'
  import { ref } from 'vue'

  const fileList = ref([
    {
      id: 'a',
      name: 'Tech design requirements.pdf',
      status: 'pending',
      type: 'image/jpeg',
      url: 'https://storage.googleapis.com/msgsndr/Vnhvoz8w8g7iFEFz37aq/media/640572bf27f37128ce68dcd2.jpeg',
    },
    {
      id: 'b',
      name: 'Tech design requirements.pdf',
      status: 'finished',
      type: 'video/mp4',
      url: 'https://storage.googleapis.com/msgsndr/Vnhvoz8w8g7iFEFz37aq/media/ab8d4d61-33a6-48be-a56b-df60693544ae.jpeg',
    },
    {
      id: 'c',
      name: 'Tech design requirements.pdf',
      status: 'uploading',
      percentage: 50,
      type: 'application/pdf',
      url: 'https://storage.googleapis.com/msgsndr/Vnhvoz8w8g7iFEFz37aq/media/6396e0f2b5d8bd0ff06eb0df.jpeg',
    },
    {
      id: 'd',
      name: 'Tech design requirements.pdf',
      status: 'error',
      type: 'zip',
      percentage: 50,
    },
  ])

  const handleChange = data => {
    // your logic here
  }
</script>

Imports

import { HLUpload } from '@platform-ui/highrise'

Props

Name	Type	Default	Description
id *	`string \| undefined`	`undefined`	The `id` of the element
multiple	`boolean`	`false`	Enables multiple file uploads
disabled	`boolean \| undefined`	`undefined`	Disables the upload functionality
fileList	`UploadFileInfo[]`	`[]`	The list of files being uploaded
max	`number \| undefined`	`undefined`	Maximum number of files that can be uploaded
type	`'draggable' \| 'button'`	`'draggable'`	Sets the style of the upload component
inline	`boolean`	`false`	Displays the upload component in compact inline mode
buttonProps	`HLButtonProps \| undefined`	`undefined`	Props for customizing the upload button. Refer HLButtonProps
showDownloadButton	`boolean`	`false`	Toggles the download button visibility for finished files
accept	`string \| undefined`	`undefined`	File types allowed for upload. See accept for more details.
onDownload	`Function \| undefined`	`undefined`	Custom download handler function
onRetry	`Function \| undefined`	`undefined`	Custom retry handler function
onPreview	`Function \| undefined`	`undefined`	Custom preview handler function

Types

Upload File Info

interface UploadFileInfo {
  id: string
  name: string
  batchId?: string | null
  percentage?: number | null
  status: 'pending' | 'uploading' | 'finished' | 'removed' | 'error'
  url?: string | null
  file?: File | null
  thumbnailUrl?: string | null
  type?: string | null
  fullPath?: string | null
}

Emits

Name	Arguments	Description
`@change`	`(val: { file: UploadFileInfo, fileList: Array<UploadFileInfo>, event?: Event })`	Triggered when files are added or removed
`@remove`	`(val: { file: UploadFileInfo, fileList: Array<UploadFileInfo> })`	Triggered when a file is removed.
`@update:file-list`	`(val: UploadFileInfo[])`	Triggered when the file list is updated
`@download`	`(file: UploadFileInfo)`	Triggered when a file download is initiated. Refer Types

Slots

Name	Parameters	Description
`buttonContent`	`()`	Content inside the button when type is `'button'`
`buttonIcon`	`()`	Icon slot for the button when type is `'button'`
`extra`	`()`	Custom description for the upload area
`inlineUploadLabelIcon`	`()`	Icon slot for the inline upload label when inline is `true`
`inlineUploadLabelText`	`()`	Text slot for the inline upload label when inline is `true`

Upload ​

Draggable Upload (Default) ​

Custom Content ​

By File Manager (Button Upload) ​

Accept (File Types) ​

File Handling ​

Multiple Upload ​

Disabled Upload ​

Download Support ​

Inline Upload ​

Imports ​

Props ​

Types ​

Upload File Info ​

Emits ​

Slots ​

Upload

Draggable Upload (Default)

Custom Content

By File Manager (Button Upload)

Accept (File Types)

File Handling

Multiple Upload

Disabled Upload

Download Support

Inline Upload

Imports

Props

Types

Upload File Info

Emits

Slots