Vue.js Upload

This document describes the minimum flow required to connect DEXTUploadX5 (hereinafter X5) upload in a Vue.js environment. It assumes that the plugin setup and component creation from the Getting Started document are already complete.

Basic upload flow

• Create DEXTUploadX5List or another X5 UI component.
• After the component is created, specify the upload processing URL.
• The user adds files or folders.
• Call upload() to start sending data to the server.
• The server processes the upload and returns an HTTP 200 response.
• The client handles the result in @upload-completed or @error.

Set the upload URL on the client

<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.setUploadURL("/api/upload");
  ready.value = true;
}

function handleUploadCompleted(id, result) {
  console.log(result);
}

function handleError(id, code, msg) {
  alert(id + " => " + code + "\n" + msg);
}
</script>

<template>
  <DEXTUploadX5List
    id="dext5"
    :style="{ width: '100%', height: '320px' }"
    @created="handleCreated"
    @error="handleError"
    @upload-completed="handleUploadCompleted"
  />
</template>

Add files and run upload

function addFiles() {
  DX5.get("dext5")?.openFileDialog();
}

function addFolder() {
  DX5.get("dext5")?.openFolderDialog();
}

function upload() {
  DX5.get("dext5")?.upload("AUTO");
}

Process on an Express server

# Server project
npm install express multer dextuploadx5-express-handler

import express from "express";
import { createDEXTUploadX5Handler } from "dextuploadx5-express-handler";

const router = express.Router();

router.post("/api/upload", createDEXTUploadX5Handler({
  uploadDir: process.env.DEXT_UPLOAD_DIR,
  tempDir: process.env.DEXT_TEMP_DIR,
  onComplete: async ({ res, files }) => {
    const results = [];

    for (const file of files) {
      const saved = await file.save();
      results.push(saved.name);
    }

    res.status(200).type("text/plain; charset=utf-8").send(results.join("\n"));
  }
}));

export default router;

If the server responds with 200 even though an error occurred, X5 may determine that the upload succeeded.