Upload

Drag-and-drop, progress kuzatuvi, rasm ko‘rinishi va bir nechta ro‘yxat uslublariga ega fayl yuklash.

<script setup lang="ts">
import { ref } from 'vue'
import { VxUpload } from 'veloxui'
import type { UploadFile } from 'veloxui'

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

<template>
  <VxUpload v-model="files" action="/api/upload" />
</template>

Drag and Drop

Drop zona maydoni uchun drag’ni yoqing. Foydalanuvchilar fayllarni zonaga sudrab olib kelishi yoki bosib tanlash uchun oynani ochishi mumkin.

Drop files here or click to browse

Supports JPG, PNG, GIF up to 10MB

<script setup lang="ts">
import { ref } from 'vue'
import type { UploadFile } from 'veloxui'

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

<template>
  <VxUpload
    v-model="files"
    action="/api/upload"
    drag
    multiple
    tip="Supports JPG, PNG, GIF up to 10MB"
  />
</template>

Picture List

Fayl nomlari yonida thumbnaillarni ko‘rsatish uchun list-type="picture"’ni belgilang.

<script setup lang="ts">
import { ref } from 'vue'
import type { UploadFile } from 'veloxui'

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

<template>
  <VxUpload
    v-model="files"
    action="/api/upload"
    list-type="picture"
    multiple
    accept="image/*"
  />
</template>

Picture Card

Hover amallar (preview va o‘chirish)’ga ega rasm kartalari gridini ko‘rsatish uchun list-type="picture-card"’ni belgilang.

<script setup lang="ts">
import { ref } from 'vue'
import type { UploadFile } from 'veloxui'

const files = ref<UploadFile[]>([
  { uid: '1', name: 'photo.jpg', status: 'success', url: 'https://picsum.photos/200/200?1' },
  { uid: '2', name: 'avatar.png', status: 'success', url: 'https://picsum.photos/200/200?2' },
])
</script>

<template>
  <VxUpload
    v-model="files"
    action="/api/upload"
    list-type="picture-card"
    multiple
    accept="image/*"
    :limit="6"
  />
</template>

Multiple Files

Bir vaqtning o‘zida bir nechta faylni tanlashga ruxsat berish uchun multiple’ni yoqing.

<script setup lang="ts">
import { ref } from 'vue'
import type { UploadFile } from 'veloxui'

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

<template>
  <VxUpload v-model="files" action="/api/upload" multiple />
</template>

File Limit

Fayllar sonini cheklash uchun limit’ni belgilang. Foydalanuvchi undan ko‘p fayl qo‘shmoqchi bo‘lsa, exceed hodisasi chaqiriladi.

Maximum 3 files

<script setup lang="ts">
import { ref } from 'vue'
import type { UploadFile } from 'veloxui'

const files = ref<UploadFile[]>([])

function handleExceed(files: File[], limit: number) {
  alert(`You can only upload ${limit} files.`)
}
</script>

<template>
  <VxUpload
    v-model="files"
    action="/api/upload"
    multiple
    :limit="3"
    @exceed="handleExceed"
    tip="Maximum 3 files"
  />
</template>

Max File Size

Haddan tashqari katta fayllarni rad etish uchun max-size’ni (KB’da) belgilang. Rad etilgan fayllar hajm haqidagi xabar bilan xatolik sifatida ko‘rinadi.

Max 500KB per file

<script setup lang="ts">
import { ref } from 'vue'
import type { UploadFile } from 'veloxui'

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

<template>
  <VxUpload
    v-model="files"
    action="/api/upload"
    :max-size="500"
    tip="Max 500KB per file"
  />
</template>

Custom Request

Yuklashni o‘zingiz boshqarish uchun custom-request’dan foydalaning (masalan, axios, S3 presigned URL va h.k.).

Using custom upload handler

<script setup lang="ts">
import { ref } from 'vue'
import type { UploadFile, UploadRequestOptions } from 'veloxui'

const files = ref<UploadFile[]>([])

function customUpload(options: UploadRequestOptions) {
  const formData = new FormData()
  formData.append('file', options.file)

  fetch('/api/upload', { method: 'POST', body: formData })
    .then(res => res.json())
    .then(data => options.onSuccess(data))
    .catch(err => options.onError(err.message))
}
</script>

<template>
  <VxUpload
    v-model="files"
    :custom-request="customUpload"
    multiple
  />
</template>

Pre-populated List

Oldindan to‘ldirilgan fayl ro‘yxatini ko‘rsatish uchun mavjud fayllarni v-model orqali uzating.

report.pdf239.3 KB

data.csv12.1 KB

<script setup lang="ts">
import { ref } from 'vue'
import type { UploadFile } from 'veloxui'

const files = ref<UploadFile[]>([
  { uid: '1', name: 'report.pdf', size: 245000, status: 'success' },
  { uid: '2', name: 'data.csv', size: 12400, status: 'success' },
])
</script>

<template>
  <VxUpload v-model="files" action="/api/upload" />
</template>

Disabled

file.pdf120.1 KB

<template>
  <VxUpload v-model="files" disabled />
</template>

Props

Prop	Type	Default	Description
modelValue	UploadFile[]	[]	Fayl ro‘yxati (v-model)
action	string	''	Yuklash endpoint URL’i
headers	Record<string, string>	—	So‘rov uchun maxsus headerlar
data	Record<string, string>	—	Qo‘shimcha form ma’lumotlari
name	string	'file'	Fayl uchun form maydoni nomi
withCredentials	boolean	false	So‘rov bilan birga cookie yuborish
accept	string	''	Qabul qilinadigan fayl turlari (masalan, image/*, .pdf)
multiple	boolean	false	Bir nechta fayl tanlashga ruxsat berish
limit	number	0	Fayllar maksimal soni (0 = cheksiz)
maxSize	number	0	Maksimal fayl hajmi (KB, 0 = cheksiz)
disabled	boolean	false	Yuklashni o‘chirib qo‘yish
drag	boolean	false	Drag-and-drop zonasini yoqish
listType	'text' | 'picture' | 'picture-card'	'text'	Fayl ro‘yxati ko‘rinish uslubi
showFileList	boolean	true	Trigger ostida fayl ro‘yxatini ko‘rsatish
autoUpload	boolean	true	Tanlangan zahoti yuklash
customRequest	(options: UploadRequestOptions) => void	—	Maxsus yuklash handleri
beforeUpload	(file: File) => boolean | Promise<boolean>	—	Yuklash boshlanishidan oldingi hook
tip	string	''	Trigger ostidagi yordam matni

Events

Event	Type	Description
update:modelValue	(files)	Fayl ro‘yxati o‘zgardi
change	(file, files)	Fayl qo‘shildi yoki statusi o‘zgardi
remove	(file, files)	Fayl o‘chirildi
success	(file, response)	Yuklash muvaffaqiyatli yakunlandi
error	(file, error)	Yuklash muvaffaqiyatsiz tugadi
progress	(file, percent)	Yuklash progressi yangilandi
exceed	(files, limit)	Fayllar sonidan oshib ketildi
preview	(file)	Fayl ko‘rinishi so‘raldi (nom yoki ko‘z belgisini bosish)

Slots

Slot	Description
default	Trigger uchun maxsus kontent (tugma yoki drag zona ichini almashtiradi)
tip	Trigger ostidagi maxsus yordam kontenti

Exposed Methods

Method	Description
submit()	status: 'ready' bo‘lgan barcha fayllarni qo‘lda yuklash (autoUpload false bo‘lganda)
trigger()	Fayl tanlash oynasini dasturiy ochish

UploadFile Interface

interface UploadFile {
  uid: string           // Noyob identifikator
  name: string          // Fayl nomi
  size?: number         // Fayl hajmi (bayt)
  type?: string         // MIME turi
  status: 'ready' | 'uploading' | 'success' | 'error'
  percent?: number      // Yuklash progressi (0-100)
  url?: string          // Fayl URL’i (oldindan mavjud fayllar uchun)
  thumbUrl?: string     // Thumbnail URL’i (rasmlar uchun avtomatik)
  raw?: File            // Asl File obyekti
  response?: any        // Server javobi
  error?: string        // Xatolik xabari
}

UploadRequestOptions Interface

interface UploadRequestOptions {
  file: File
  onProgress: (percent: number) => void
  onSuccess: (response: any) => void
  onError: (error: string) => void
}