React Download

This document describes the basic flow for connecting DEXTUploadX5 (hereinafter X5) download in a React environment. Unlike upload, download is not based on local files already present in the browser. Instead, it is configured by binding file information stored on the server to the X5 list and then downloading it.

Basic download concept

The basic flow for handling downloads in React is as follows.

• Query the file information for the download targets.
• Register them in the X5 component as virtual files.
• Connect a download URL to each virtual file.
• Call download().
• The server returns the corresponding file as an attachment response.

In other words, download does not start by selecting an actual file in the browser. The file information stored on the server must first be bound to the UI.

Register virtual files

Downloadable items are typically registered using addVirtualFile() or addVirtualFileList(). Each item must include a unique identifier, name, size, and download URL.

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

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

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

The download function operates based on virtual files connected with downUrl.

Run download

After virtual file registration is complete, call download() from a button event or similar trigger to perform single or multiple file downloads.

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

Pass a flag in the first argument to define the target range.

• AUTO: based on the default target
• SELECTED: based on the selected items
• CHECKED: based on the checked items

If you pass true as the second argument, it is handled as a multi-download operation.

Simplest example

import { useState } from "react";
import { DX5, DEXTUploadX5List } from "dextuploadx5-react";

export default function DownloadPage() {
  const [version, setVersion] = useState("");
  const isLoaded = version !== "";

  const handleCreated = (id) => {
    const dx = DX5.get(id);
    // By default, X5 cannot download files larger than 100 MB,
    // so use setLimitMultiDownloadSize to increase the allowed size as needed.
    dx.setLimitMultiDownloadSize(300 * 1024 * 1024);
    dx.addVirtualFile({ vindex: "FD0001", name: "sample-1.jpg", size: 509147, downUrl: "/api/download?key=FD0001" });
    dx.addVirtualFile({ vindex: "FD0002", name: "sample-2.jpg", size: 239826, downUrl: "/api/download?key=FD0002" });

    setVersion(dx.getVersion());
  };

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

  const handleError = (id, code, msg) => {
    alert(id + " => " + code + "\n" + msg);
  };

  return (
    <div>
      <DEXTUploadX5List
        id="dext5"
        style={{ width: "100%", height: "320px" }}
        onCreated={handleCreated}
        onError={handleError}
      />
      <p>DEXTUploadX5 Version: {version}</p>
      <button disabled={!isLoaded} onClick={() => handleDownloadClick("AUTO")}>Download single file</button>
      <button disabled={!isLoaded} onClick={() => handleDownloadClick("AUTO", true)}>Download multiple files</button>
    </div>
  );
}

The setLimitMultiDownloadSize method changes only the allowed range; it does not improve browser performance or network performance itself.

Server response conditions

The download URL must ultimately return file data. To make the browser handle it as a file save action, the server typically includes the Content-Disposition: attachment header.

import express from "express";
import fs from "fs";
import path from "path";

const router = express.Router();

router.get("/api/download", (req, res) => {
  const filePath = path.resolve("files/sample-1.jpg");

  res.setHeader(
    "Content-Disposition",
    "attachment; filename*=UTF-8''sample-1.jpg"
  );
  res.setHeader("Content-Type", "image/jpeg");

  res.sendFile(filePath);
});

export default router;

In actual services, it is common to locate the file using a URL parameter, post number, or file key, verify authorization, and then respond with the file.

Handle HEAD requests

Depending on the download method, the server may also need to process a HEAD request. Therefore, when configuring a download route, it is safer to allow not only GET but also HEAD when required.

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