Vue.js Download

This document describes the basic flow for connecting DEXTUploadX5 (hereinafter X5) download in a Vue.js environment. Downloads are configured by connecting server-side file information to the X5 list as virtual files.

Register virtual files

function handleCreated(id) {
  const dx = DX5.get(id);

  dx.addVirtualFile({
    vindex: "FD0001",
    name: "sample-1.jpg",
    size: 509147,
    downUrl: "/api/download?key=FD0001"
  });
}

Download works based on virtual files that have downUrl.

Run download

function download(flag, multiple = false) {
  DX5.get("dext5")?.download(flag, multiple);
}

• AUTO: Uses the default target.
• SELECTED: Uses selected items.
• CHECKED: Uses checked items.

Simplest example

<script setup>
import { ref } from "vue";
import { DX5, DEXTUploadX5List } from "dextuploadx5-vue";

const ready = ref(false);

function handleCreated(id) {
  const dx = DX5.get(id);
  dx.setLimitMultiDownloadSize(300 * 1024 * 1024);
  dx.addVirtualFile({ vindex: "FD0001", name: "sample-1.jpg", size: 509147, downUrl: "/api/download?key=FD0001" });
  ready.value = true;
}

function download(flag, multiple = false) {
  DX5.get("dext5")?.download(flag, multiple);
}
</script>

<template>
  <DEXTUploadX5List id="dext5" :style="{ width: '100%', height: '320px' }" @created="handleCreated" />
  <button :disabled="!ready" @click="download('AUTO')">Download one file</button>
  <button :disabled="!ready" @click="download('AUTO', true)">Download multiple files</button>
</template>

Server response conditions

The download URL must ultimately return file data. To make the browser treat the response as a file save, the server generally includes the Content-Disposition: attachment header.

router.get("/api/download", handleDownload);
router.head("/api/download", handleDownload);