Migrating from ghl-ui Upload to HighRise Upload

This guide explains how to move from UIUpload to HighRise HLUpload. HighRise keeps the same UploadFileInfo[] model, switches binding to v-model:file-list, and adds inline/button trigger options.

Component Implementation Changes

Import Changes

- import { UIUpload } from '@gohighlevel/ghl-ui'
+ import { HLUpload } from '@platform-ui/highrise'

Basic Usage Changes

- <UIUpload :fileList="files" @change="handleChange" />
+ <HLUpload
+   id="file-upload"
+   v-model:file-list="files"
+   accept="image/*"
+   @change="handleChange"
+ />

Props Changes

ghl-ui Prop	HighRise Prop	Notes
fileList	v-model:file-list	Same UploadFileInfo[] payload; two-way binding uses the file-list model
multiple	multiple	Same behavior
max	max	Max file count
type	type	draggable (default) or button; HighRise also supports inline
buttonProps	button-props	Passed to the internal HLButton when type="button"
showDownloadButton	show-download-button	Shows download action in the list
accept	accept	Same MIME filter
disabled	disabled	Same behavior
onDownload	on-download	Override default download; also emits download
–	inline	New inline trigger; pairs with the built-in HLUploadList

Examples

Drag-and-drop Upload

<template>
  <HLUpload id="profile-upload" v-model:file-list="files" accept="image/*">
    <template #extra>
      <div class="flex flex-col items-center gap-1 text-gray-600">
        <span class="font-medium text-blue-600">Click to upload</span>
        <span>or drag and drop PNG/JPG</span>
      </div>
    </template>
  </HLUpload>
</template>

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

const files = ref([])
</script>

Button-trigger Upload

<template>
  <HLUpload
    id="invoice-upload"
    type="button"
    v-model:file-list="files"
    :button-props="{ variant: 'primary', size: 'md' }"
    :show-download-button="true"
    @download="handleDownload"
  >
    <template #buttonContent>Upload invoice</template>
  </HLUpload>
</template>

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

const files = ref([])

const handleDownload = file => {
  // optional custom download
  console.log('download', file)
}
</script>

Inline Upload

<template>
  <HLUpload id="inline-upload" inline v-model:file-list="files" :max="3">
    <template #inlineUploadLabelText>Attach files</template>
  </HLUpload>
</template>

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

const files = ref([])
</script>

Best Practices

1. Prefer v-model:file-list update cycles stay in sync.
2. Use type="button" when you need a button-only trigger; keep draggable for drop-zones.
3. Provide accept and max to set clear upload constraints.
4. Use on-download + @download to plug in custom download flows.
5. Disable the control while uploads are in-flight to avoid duplicate selections.

Additional Notes

1. Emits change, remove, update:file-list, and download (when on-download is supplied).
2. Exposes clear(), submit(), and openFileDialog() via refs for advanced control.
3. Uses the built-in HLUploadList to render the list consistently across variants.