@uploadfile/vue

Set UPLOADFILE_TOKEN on the server. Tokens from https://staging.uploadfile.dev use staging; tokens from https://www.uploadfile.dev use production. The SDK picks the address from the token.

Tokens issued before version 0.2.0 count as production. Staging users need to copy a fresh token from the staging dashboard.

Learn more: uploadfile.dev/docs

Example

// utils/uploadfile.ts
import {
  generateUploadButton,
  generateUploadDropzone,
  generateVueHelpers,
} from "@uploadfile/vue";

export const UploadButton = generateUploadButton<OurFileRouter>();
export const UploadDropzone = generateUploadDropzone<OurFileRouter>();

export const { useUploadfile } = generateVueHelpers<OurFileRouter>();

<script setup lang="ts">
import type { OurFileRouter } from "server/uploadfile";

import { UploadButton, UploadDropzone } from "~/utils/uploadfile";
</script>

<template>
  <main
    class="flex min-h-screen flex-col items-center justify-center gap-16 p-24"
  >
    <div class="flex flex-col items-center justify-center gap-4">
      <span class="text-center text-4xl font-bold">
        Upload a file using a button:
      </span>

      <UploadButton
        :config="{
          endpoint: 'videoAndImage',
        }"
      />
    </div>
    <div className="flex flex-col items-center justify-center gap-4">
      <span className="text-center text-4xl font-bold">
        ...or using a dropzone:
      </span>
      <UploadDropzone
        :config="{
          endpoint: 'withMdwr',
        }"
      />
    </div>
  </main>
</template>