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

# 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.