Nmorph UI Kit

File Upload

<script setup lang="ts">
import { ref } from "vue";
import { NmorphButton, NmorphFileUpload } from "@nmorph/nmorph-ui-kit";

const value = ref([]);

const resetFiles = () => {
  value.value = [];
};
</script>

<template>
  <div class="file-upload-model-value-overview">
    <NmorphFileUpload v-model="value" />
    <NmorphButton text="Reset files" thickness="thin" @click="resetFiles" />
  </div>
</template>

Disables the file upload component

<script setup lang="ts">
import { NmorphFileUpload } from "@nmorph/nmorph-ui-kit";
</script>

<template>
  <div class="file-upload-disabled-overview">
    <NmorphFileUpload disabled />
  </div>
</template>

Allows uploading multiple files if set to true.

<script setup lang="ts">
import { NmorphFileUpload } from "@nmorph/nmorph-ui-kit";
</script>

<template>
  <div class="file-upload-multiple-overview">
    <NmorphFileUpload multiple />
  </div>
</template>

If set to true, uploaded photos will be displayed with a preview.

<script setup lang="ts">
import { NmorphFileUpload } from "@nmorph/nmorph-ui-kit";
</script>

<template>
  <div class="file-upload-photo-with-preview-overview">
    <NmorphFileUpload photo-with-preview />
  </div>
</template>

NmorphFileUpload Api

Attributes

Slots

Expose

Events

Translations i18n

Use these keys to configure custom text for languages that the library does not support out of the box.

Model-value

Disabled

Multiple

Photo-with-preview