AisFileUpload

Usage

import { AisFileUpload } from "@ais-public/ais-components"

Default behaviour

Selected file: 

<template>
  <div class="flex flex-col gap-12">
    <AisFileUpload v-model="file"></AisFileUpload>
    <pre>Selected file: {{computeDisplayFileName}}</pre>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { AisFileUpload } from '@ais-public/ais-components';

const file = ref(null);

const computeDisplayFileName = computed(() => {
  if (file.value !== null) {
    return file.value.name;
  }
});
</script>

Props

native

<template>
  <div class="flex flex-col gap-4">
    <AisFileUpload v-model="file" native></AisFileUpload>
    <div v-if="file != null">
      Selected file: {{file.name}}
    </div>
  </div>
</template>

<script setup>
import { AisFileUpload } from '@ais-public/ais-components';
import { ref } from 'vue';

const file = ref(null);
</script>

multiple

Selected files

<template>
  <div class="flex flex-col gap-4">
    <AisFileUpload v-model="files" native multiple></AisFileUpload>
    <label class="font-bold">Selected files</label>
    <div v-for="file in files">
      {{file.name}}
    </div>
  </div>
</template>

<script setup>
import { AisFileUpload } from '@ais-public/ais-components';
import { ref } from 'vue';

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

drop-zone

If you try to use both native and drop-zone prop then drop-zone prop will take priority.

Drag or Drop File(s)OR

Selected files

<template>
  <div class="flex flex-col h-[400px]">
    <AisFileUpload  drop-zone multiple variant="success"  v-model="files" ></AisFileUpload>
    <label class="font-bold">Selected files</label>
    <div v-for="file in files">
      {{file.name}}
    </div>
  </div>
</template>

<script setup>
import { AisFileUpload } from '@ais-public/ais-components';
import { ref } from 'vue';
const files = ref([]);

</script>

variants

primarysecondarydefaultinfosuccesswarningdanger

<template>
  <div class="grid gap-4">
    <AisSelect
        :options="variants"
        v-model="selectedVariant"
    />
    <div>
      <AisFileUpload v-model="file" native :variant="selectedVariant"></AisFileUpload>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { AisSelect } from '@ais-public/ais-components';
import { AisFileUpload } from '@ais-public/ais-components';

const variants = [
  'primary', 'secondary', 'default',
  'info', 'success', 'warning', 'danger'
];

const selectedVariant = ref('primary');
const file = ref(null);
</script>

size

smmdlg

<template>
  <div class="grid gap-4">
    <AisSelect
        :options="size"
        v-model="selectedSize"
    />
    <div>
      <AisFileUpload v-model="file" native :size="selectedSize"></AisFileUpload>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { AisSelect } from '@ais-public/ais-components';
import { AisFileUpload } from '@ais-public/ais-components';

const size = [
  'sm', 'md', 'lg',
];

const selectedSize = ref('md');
const file = ref(null);
</script>

accept

You can pass comma seperated string.

Example .jpeg,.csv - only jpeg and csv files will be visible while selecting files.

<template>
  <div class="flex flex-col gap-12">
    <AisFileUpload accept=".jpg,.csv" v-model="file" native variant="info" :accept="accept"></AisFileUpload>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { AisFileUpload } from '@ais-public/ais-components';

const file = ref(null);
</script>

disabled

<template>
  <div>
    <AisFileUpload native disabled></AisFileUpload>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { AisFileUpload } from '@ais-public/ais-components';

const file = ref(null);

const accept = ref(['jpeg', 'csv']);
</script>

Selected Files

AisFileUpload is a controlled component, and the v-model property owns the selected files. The component always shows what the model holds, so the parent component can initialize, interrogate, and edit the file selection. An internal representation is only used if no model is bound. The example below illustrates how a parent component can clear the file upload component's selection.

Drag or Drop File(s)OR

<template>
  <div class="flex flex-col gap-4">
    <div class="h-[300px]">
      <AisFileUpload v-model="files" drop-zone multiple></AisFileUpload>
    </div>
    <template v-if="files && files.length > 0">
      <div>
        <h4 class="font-bold">Selection</h4>
        <ol class="list-decimal pl-6 mt-1">
          <li v-for="file in files" :key="file.name">
            <span class="inline-flex items-center gap-2">
              <AisIconButton icon="delete" :label="`Remove ${file.name}`" hover @click="removeFile(file)" />
              {{file.name}}
            </span>
          </li>
        </ol>
      </div>
      <div>
        <AisButton icon="delete" @click="files = []">Clear Files</AisButton>
      </div>
    </template>
  </div>
</template>

<script setup>
import { AisFileUpload, AisButton, AisIconButton } from '@ais-public/ais-components';
import { ref } from 'vue';

const files = ref([]);

function removeFile(file) {
  files.value = files.value.filter(f => f !== file);
}
</script>

Event

This component emits select event.

Selected file: 

<template>
  <div class="flex flex-col gap-12">
    <AisFileUpload @select="onFileSelect"></AisFileUpload>
    <pre>Selected file: {{computeDisplayFileName}}</pre>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { AisFileUpload } from '@ais-public/ais-components';

const file = ref(null);

const onFileSelect = (event) => {
  file.value = event
}

const computeDisplayFileName = computed(() => {
  if (file.value !== null){
    return file.value.name
  }
})

</script>