Migrating from ghl-ui Upload to HighRise Upload

This guide will help you migrate from the ghl-ui Upload component to the new HighRise Upload component.

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"
+   label="Upload Files"
+   @change="handleChange"
+ />

Props Changes

ghl-ui Prop	HighRise Prop	Notes
fileList	v-model:file-list	Changed to use file-list prop
accept	accept	Enhanced file type support
status	status	New prop for validation status
validation-message	validation-message	New prop for validation feedback
max-size	max-size	New prop for file size limit (MB)
max-count	max-count	New prop for file count limit
show-file-list	show-file-list	New prop for file list visibility
drag	drag	New prop for drag and drop

Examples

Basic Upload

<template>
  <HLUpload v-model:file-list="fileList" @change="handleChange"> </HLUpload>
</template>

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

const fileList = ref([])

const handleChange = (fileList: HLUploadFile[]) => {
  console.log(fileList)
}
</script>

Drag and Drop Upload

<template>
  <HLUpload id="drag-upload" v-model:value="files" label="Drag and Drop Files" :max-size="5" :max-count="5" accept="image/*" drag />
</template>

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

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

Upload with Custom Preview

<template>
  <HLUpload
    id="custom-preview-upload"
    v-model:value="files"
    label="Upload Images"
    :max-size="5"
    :max-count="5"
    accept="image/*"
    :show-file-list="true"
  >
    <template #preview="{ file }">
      <div class="custom-preview">
        <img :src="file.url" :alt="file.name" />
        <span>{{ file.name }}</span>
      </div>
    </template>
  </HLUpload>
</template>

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

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

<style scoped>
.custom-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
}

.custom-preview img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
}
</style>

Upload with File Handler

<template>
  <HLUpload v-model:file-list="fileList" @change="handleChange"> </HLUpload>
</template>

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

const fileList = ref([])

const handleChange = fileList => {
  // simulating file upload
  // call actual upload API here and update the fileList with the actual file info
  let progress = 0
  const interval = setInterval(() => {
    progress += 20
    fileList.value = fileList.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)
    }
}
</script>

Best Practices

1. Always provide a unique id for accessibility
2. Use v-model:value for two-way binding
3. Implement proper form validation
4. Set appropriate file size limits
5. Set appropriate file count limits
6. Specify accepted file types
7. Add proper ARIA labels
8. Handle loading states appropriately
9. Use descriptive labels
10. Implement proper error handling
11. Consider using tooltips for additional information
12. Handle disabled states properly
13. Use consistent spacing and alignment
14. Consider file preview options
15. Handle file type validation
16. Consider drag and drop UX

Additional Notes

1. The component automatically handles focus states
2. Error states are managed through validation status
3. Supports keyboard navigation
4. Maintains consistent styling with other form components
5. Handles disabled states consistently
6. Integrates seamlessly with form validation
7. Maintains accessibility standards
8. Supports custom styling through CSS variables
9. Provides clear visual feedback for all states
10. Works well on both desktop and mobile devices
11. Supports both controlled and uncontrolled modes
12. Includes built-in validation support
13. Supports file type validation
14. Handles file size validation
15. Supports custom file previews
16. Provides clear upload feedback
17. Supports drag and drop
18. Handles file list management