FileDropZone

Basic Usage

View Source

<script setup lang="ts">
import { UniFileDropZone } from "unify-ui";
import { ref } from "vue";

const filesInfo = ref<{ name: string }[]>([]);

function fileChange(fileList: File[]) {
  filesInfo.value = fileList.map((item) => ({ name: item.name }));
}
</script>

<template>
  <UniFileDropZone prompt-text="PNG, JPG, GIF up to 10MB" @file-change="fileChange"></UniFileDropZone>

  <p>File list:</p>
  <ul>
    <li v-for="item in filesInfo" :key="item.name">{{ item.name }}</li>
  </ul>
</template>

Multiple Files

View Source

<script setup lang="ts">
import { ref } from "vue";
import { UniFileDropZone } from "unify-ui";

const filesInfo = ref<{ name: string }[]>([]);

function fileChange(fileList: File[]) {
  filesInfo.value = fileList.map((item) => ({ name: item.name }));
}
</script>

<template>
  <UniFileDropZone multiple @file-change="fileChange"> </UniFileDropZone>

  <p>File list:</p>
  <ul>
    <li v-for="item in filesInfo" :key="item.name">{{ item.name }}</li>
  </ul>
</template>

Customized Prompt Text

View Source

<script setup lang="ts">
import { UniFileDropZone } from "unify-ui";
import { ref } from "vue";

const filesInfo = ref<{ name: string }[]>([]);

function fileChange(fileList: File[]) {
  filesInfo.value = fileList.map((item) => ({ name: item.name }));
}
</script>

<template>
  <UniFileDropZone prompt-text="Customized Prompt Text" @file-change="fileChange"></UniFileDropZone>

  <p>File list:</p>
  <ul>
    <li v-for="item in filesInfo" :key="item.name">{{ item.name }}</li>
  </ul>
</template>

Customized Content

View Source

<script setup lang="ts">
import { UniFileDropZone } from "unify-ui";
</script>

<template>
  <UniFileDropZone prompt-text="PNG, JPG, GIF up to 10MB"> Customize Content </UniFileDropZone>
</template>

API

Properties

const props = defineProps<{
  promptText?: string;
  multiple?: boolean;
}>();

Events

const emits = defineEmits<{
  (e: "file-change", files: File[]): void;
}>();

Slots

defineSlots<{
  default?: (props: {}) => any;
}>();