www.dextsolution.com
DEXTUPLOAD
X5
Product description > Vue.js > Download

# 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);