@apideck/vue-file-picker

Vue FilePicker

A Vue component to embed Apideck FilePicker in a Vue application.

FilePicker JS | React FilePicker | Vue FilePicker

Installation

Package

npm install @apideck/vue-file-picker

Prerequisites

Before opening the Vault modal with @apideck/vue-file-picker, you need to create a Vault session from your backend using the Vault API or one of our SDKs. Find out more in the docs.

Usage

Pass the JWT you got from the Vault session to @apideck/vue-file-picker, call the slot prop open to open the FilePicker modal.

<script setup lang="ts">
import { FilePicker } from '@apideck/vue-file-picker';

const sessionJwt = 'REPLACE_WITH_SESSION_TOKEN';

function onSelect(file: File) {
  console.log('selected file:', file);
}
</script>

<template>
  <main>
    <FilePicker
      :token="sessionJwt"
      :on-select="onSelect"
      v-slot="filePickerProps"
    >
      <button @click="filePickerProps.open()">Open</button>
    </FilePicker>
  </main>
</template>

If you want to get notified when the modal opens and closes, you can provide the onReady and onClose options.

<script setup lang="ts">
import { FilePicker } from '@apideck/vue-file-picker';

const sessionJwt = 'REPLACE_WITH_SESSION_TOKEN';

function onSelect(file: File) {
  console.log('selected file:', file);
}

function onClose() {
  console.log('closed!');
}

function onReady() {
  console.log('ready!');
}
</script>

<template>
  <main>
    <FilePicker
      :token="sessionJwt"
      :on-close="onClose"
      :on-ready="onReady"
      :on-select="onSelect"
      v-slot="filePickerProps"
    >
      <button @click="filePickerProps.open()">Open</button>
    </FilePicker>
  </main>
</template>

Props

Property	Type	Required	Default	Description
token	string	true	-	The JSON Web Token returned from the Create Session call
on-select	event	false	-	The function that gets called when a file is selected
on-connection-select	event	false	-	The function that gets called when a connection is selected
title	string	false	Apideck File Picker	Title shown in the modal
sub-title	string	false	Select a file	Subtitle shown in the modal
show-attribution	boolean	false	true	Show "Powered by Apideck" in the backdrop of the modal backdrop
open	boolean	false	false	Opens the file picker if set to true
on-close	event	false	-	Function that gets called when the modal is closed
file-to-save	file	false	-	Forces "Upload" mode to select the folder to upload the provided file