DEXTUploadX5 Vue

Vue.js wrapper package for DEXTUploadX5 multipart and resumable uploads.

This package loads the DEXTUploadX5 browser script through a Vue plugin and exposes ready-to-use Vue components for the list, grid, tile, and single UI types.

Features

• Provides a DEXTUploadX5Plugin that loads dextuploadx5.js
• Exposes Vue components for list, grid, tile, and single UI modes
• Includes a DX5 helper for accessing the underlying global DX5 object
• Supports component refs for waiting until a DX5 instance is ready
• Provides useDEXTUploadX5() for Composition API usage
• Includes TypeScript declarations for TypeScript projects
• Keeps vue as a peer dependency

Requirements

• Vue 3.3 or later
• A licensed DEXTUploadX5 product install available to the browser
• [email protected] requires DEXTUploadX5 4.5.0.0(beta) or later

Installation

npm install dextuploadx5-vue vue

After installation, you must manually copy node_modules/dextuploadx5-vue/dist/dx5 to the directory served by your productPath.

For example, if productPath="/dx5/", your application must serve the copied files from /dx5/..., including /dx5/dextuploadx5.js.

If this manual copying process is cumbersome in a Vite environment, consider using dextuploadx5-vue-vite to help copy and serve the DX5 static files.

Quick Start

Install the plugin before mounting the app.

import { createApp } from "vue";
import App from "./App.vue";
import { DEXTUploadX5Plugin } from "dextuploadx5-vue";

createApp(App)
    .use(DEXTUploadX5Plugin, {
        authKey: "YOUR_AUTH_KEY",
        productPath: "/dx5/"
    })
    .mount("#app");

Render a DX5 component after the plugin is installed.

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

const uploaderRef = ref(null);

function handleCreated(id) {
    console.log("DX5 created:", id);
}

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

<template>
    <DEXTUploadX5List
        ref="uploaderRef"
        id="upload1"
        :style="{ width: '500px', height: '300px' }"
        @created="handleCreated"
        @error="handleError"
    />
</template>

How It Works

1. DEXTUploadX5Plugin writes the DEXTUploadX5 runtime configuration to the browser global scope.
2. The plugin loads dextuploadx5.js from productPath.
3. Each Vue component waits for the global dx5 object before creating its DX5 instance.
4. Each UI component creates and destroys its own DX5 instance by id.

Plugin

DEXTUploadX5Plugin

Loads the DEXTUploadX5 script and provides DX5 access to child components.

app.use(DEXTUploadX5Plugin, {
    authKey: "...",
    productPath: "/dx5/"
});

Options

authKey: string

DEXTUploadX5 authentication key.

Required.

productPath?: string

Base path where the DEXTUploadX5 product files are served.

• Default: "/dx5/"
• dextuploadx5.js is loaded from productPath + "dextuploadx5.js"
• You must copy node_modules/dextuploadx5-vue/dist/dx5 to the directory served at this path before runtime

useDEXTUploadX5()

Returns the DX5 helper, the injected loader, and an ensureLoaded() function.

<script setup>
import { useDEXTUploadX5 } from "dextuploadx5-vue";

const { DX5, ensureLoaded } = useDEXTUploadX5();

async function logVersion() {
    await ensureLoaded();
    console.log(DX5.get("dext5")?.getVersion());
}
</script>

Components

UI Components

The package exports the following UI components:

• DEXTUploadX5List
• DEXTUploadX5Grid
• DEXTUploadX5Tile
• DEXTUploadX5Single

The package also exports the base DEXTUploadX5 component. The fixed UI components above are usually preferred because they set the DX5 type automatically.

<script setup>
import { DEXTUploadX5Grid } from "dextuploadx5-vue";

const columns = [
    { key: "grade", display: "Grade", width: 40, position: 2 },
    { key: "movie", display: "Movie", width: 80, position: 3, itemAlign: "left", valueAlign: "right" },
    { key: "action", display: "Action", width: 70, position: 4 }
];
</script>

<template>
    <DEXTUploadX5Grid
        id="grid1"
        :columns="columns"
        :style="{ width: '500px', height: '300px' }"
    />
</template>

Common Props

id?: string

DX5 instance id.

• Default: "dext5"

lang?: string

DX5 language option.

• Default: "auto"

waitingTime?: number

DX5 load waiting time.

• Default: 10000

progressType?: string

DX5 progress type value.

• Default: "0"

path?: string

Passed to DX5.create() as the DX5 path option.

• Default: ""

hidden?: boolean

Renders the DX5 container with hidden visibility and zero size.

class

style

Container display attributes for the rendered wrapper element.

columns?: any[]

Used by DEXTUploadX5Grid to create DX5 grid columns after the component is created.

Component Ref

Each UI component exposes a ref API:

• module: the created DX5 instance, or null
• ready: whether the DX5 instance is ready
• wait(): resolves with the DX5 instance when it is ready

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

const uploaderRef = ref(null);

async function openDialog() {
    const dx = await uploaderRef.value?.wait();
    dx?.openFileDialog();
}
</script>

<template>
    <DEXTUploadX5List ref="uploaderRef" id="dext5" />
    <button @click="openDialog">Add files</button>
</template>

Events

Vue templates should use kebab-case event names.

Supported events include:

• @error
• @created
• @before-items-add
• @item-adding
• @items-added
• @before-items-delete
• @item-deleting
• @items-deleted
• @item-select
• @item-check
• @item-double-click
• @upload-begin
• @upload-item-start
• @upload-item-end
• @upload-stopped
• @upload-completed
• @download-begin
• @download-item-start
• @download-item-end
• @download-stopped
• @download-completed
• @preview
• @column-data-binding
• @column-data-displaying
• @compress-waiting-begin
• @compress-waiting-completed
• @compress-waiting-stopped
• @drag-and-drop

Handlers for @before-items-add, @item-adding, @before-items-delete, and @item-deleting may return false to cancel the DX5 operation.

Handlers for @column-data-binding and @column-data-displaying may return a value to pass back to DX5.

Typical @created Usage

Most applications can treat @created as the primary point where the DX5 instance becomes available.

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

const version = ref("");

function handleCreated(id) {
    const dx = DX5.get(id);
    version.value = dx.getVersion();
}
</script>

<template>
    <DEXTUploadX5List
        id="upload2"
        @created="handleCreated"
    />
    <div>DEXTUploadX5 Version: {{ version }}</div>
</template>

Simple File Upload Example

The following example shows a minimal upload flow. When the component is created, @created marks the DX5 instance as ready and sets the upload URL. After that, the user can open the file dialog and upload the selected files.

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

const ready = ref(false);

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

    if (!dx) {
        return;
    }

    dx.setUploadURL(DX5.canonicalize("/api/upload"));
    ready.value = true;
}

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

function handleUploadClick() {
    const dx = DX5.get("dext5");

    if (!dx || !dx.hasUploadableItems()) {
        return;
    }

    dx.upload("AUTO");
}
</script>

<template>
    <DEXTUploadX5List
        id="dext5"
        :style="{ width: '500px', height: '300px' }"
        @created="handleCreated"
        @error="(id, code, msg) => console.error(id, code, msg)"
        @upload-completed="(id, result) => console.log('Upload completed:', id, result)"
    />
    <button :disabled="!ready" @click="handleAddFilesClick">
        Add files
    </button>
    <button :disabled="!ready" @click="handleUploadClick">
        Upload
    </button>
</template>

DX5 Helper

The exported DX5 object wraps the global dx5 runtime.

Available methods:

• DX5.get(id)
• DX5.create(options)
• DX5.delete(id)
• DX5.canonicalize(path)

Notes

• This package is a Vue wrapper only. The actual DEXTUploadX5 product files must be hosted separately.
• DEXTUploadX5 itself is not distributed through npm, so its required version is documented here instead of package.json.
• [email protected] supports DEXTUploadX5 4.5.0.0(beta) or later.
• After installing the package, manually copy node_modules/dextuploadx5-vue/dist/dx5 to the location served by productPath.
• If that setup is inconvenient in a Vite project, dextuploadx5-vue-vite can be used as a helper package to automate DX5 static resource handling.
• DEXTUploadX5Plugin must be installed before rendering DX5-dependent components.
• The package is intended for browser environments and does not run the DX5 runtime on the server.

Compatibility

| dextuploadx5-vue | Minimum DEXTUploadX5 version | | --- | --- | | 0.0.3 | 4.5.1.0 | | 0.0.2 | 4.5.0.0 | | 0.0.1 | 4.5.0.0(beta) |

History

0.0.3

• dextuploadx5 4.5.1.0 released.

0.0.2

• dextuploadx5 4.5.0.0 released.

0.0.1

• Initial package release

License

This package is free to use, including commercial use. Modification for internal use is allowed. Redistribution of modified versions is prohibited. DEXTUploadX5 itself is a commercial product and is not free to use under the same terms as DEXTUploadX5 Vue.

See the LICENSE file for full terms.