Skip to content

Latest commit

 

History

History
109 lines (92 loc) · 3.52 KB

MIGRATE.md

File metadata and controls

109 lines (92 loc) · 3.52 KB
Raw

Migration Guide

From Vue Uploader (@upload-io/vue-uploader)

Steps:

  1. Install @bytescale/upload-widget-vue
  2. Uninstall @upload-io/vue-uploader and uploader
  3. Replace "@upload-io/vue-uploader" with "@bytescale/upload-widget-vue" in your import statements.
  4. Replace uploader with upload-widget in all CSS class name overrides (if you have any).
  5. Replace onUpdate: (files) => {} with onUpdate: ({uploadedFiles}) => {}.
  6. Remove uploader (from imports and props)
  7. Add apiKey as a field to the object passed to the options prop (add it if you don't have one).

Before

<template>
  <button @click="uploadFile">Upload a file...</button>
</template>

<script lang="ts">
  import { Uploader } from "uploader";
  import { openUploadModal } from "@upload-io/vue-uploader";
  import type { UploadWidgetConfig, UploadWidgetResult } from "uploader";
  import type { PreventableEvent } from "@upload-io/vue-uploader";

  // Create one instance per app. (Get API keys from Bytescale)
  const uploader = Uploader({
    apiKey: "free"
  });

  // See "customization" below.
  const options: UploadWidgetConfig = {
    multi: true
  };

  export default {
    name: "App",
    methods: {
      uploadFile(event: PreventableEvent) {
        openUploadModal({
          event,
          uploader,
          options,
          onComplete: (files: UploadWidgetResult[]) => {
            if (files.length === 0) {
              alert("No files selected.");
            } else {
              alert(files.map(f => f.fileUrl).join("\n"));
            }
          }
        });
      }
    }
  };
</script>

After

<template>
  <button @click="uploadFile">Upload a file...</button>
</template>

<script lang="ts">
  import { openUploadModal } from "@bytescale/upload-widget-vue";
  import type { UploadWidgetConfig, UploadWidgetResult } from "@bytescale/upload-widget";
  import type { PreventableEvent } from "@bytescale/upload-widget-vue";

  // Full Configuration:
  // https://www.bytescale.com/docs/upload-widget#configuration
  const options: UploadWidgetConfig = {
    apiKey: "free", // Get API keys from: www.bytescale.com
    maxFileCount: 10
  };

  export default {
    name: "App",
    methods: {
      uploadFile(event: PreventableEvent) {
        openUploadModal({
          event,
          options,
          onComplete: (files: UploadWidgetResult[]) => {
            if (files.length === 0) {
              alert("No files selected.");
            } else {
              alert(files.map(f => f.fileUrl).join("\n"));
            }
          }
        });
      }
    }
  };
</script>

See also

Bytescale migration guides listed below: