Vue FileUploader - Specify a file's GUID

Use the valueChanged event to generate a unique identifier (GUID) for a file before it is uploaded and pass it as a parameter to the upload URL.

View on GitHub

App.vue


<template>
  <DxFileUploader
    :accept="accept"
    :multiple="multiple"
    :upload-mode="uploadMode"
    upload-url="https://js.devexpress.com/Demos/NetCore/FileUploader/Upload"
    @value-changed="onValueChanged($event)"
  />
</template>
 
<script>
import 'devextreme/dist/css/dx.light.css';
 
import { DxFileUploader } from "devextreme-vue/file-uploader";
 
export default {
    components: {
        DxFileUploader
    },
    data() {            
        return {
            multiple: false,
            accept: "*",
            uploadMode: "instantly"
        };
    },
    methods: {
        onValueChanged(e) {
            var url = e.component.option("uploadUrl");
            url = this.updateQueryStringParameter(url, "fileGuid", this.uuidv4());
            e.component.option("uploadUrl", url);
        },
        updateQueryStringParameter(uri, key, value) {
            var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
            var separator = uri.indexOf("?") !== -1 ? "&" : "?";
            if (uri.match(re)) {
                return uri.replace(re, "$1" + key + "=" + value + "$2");
            } else {
                return uri + separator + key + "=" + value;
            }
        },
        uuidv4() {
            return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(
                c
            ) {
                var r = (Math.random() * 16) | 0,
                v = c === "x" ? r : (r & 0x3) | 0x8;
                return v.toString(16);
            });
        }
    }
}
</script>

ASP.NET MVC/Core Controls


@(Html.DevExtreme().FileUploader()
    .ID("file-uploader")
    .Name("myFile")
    .Multiple(false)
    .Accept("*")
    .UploadMode(FileUploadMode.Instantly)
    .UploadUrl(Url.Action("Upload", "FileUploader"))
    .OnValueChanged("fileUploader_valueChanged")
)
<script>
function fileUploader_valueChanged(e) {
    var url = e.component.option("uploadUrl");
    url = updateQueryStringParameter(url, "fileGuid", uuidv4());
    e.component.option("uploadUrl", url);
}
function updateQueryStringParameter(uri, key, value) {
    var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
    var separator = uri.indexOf("?") !== -1 ? "&" : "?";
    if (uri.match(re)) {
        return uri.replace(re, "$1" + key + "=" + value + "$2");
    } else {
        return uri + separator + key + "=" + value;
    }
}
function uuidv4() {
    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
        var r = (Math.random() * 16) | 0,
            v = c === "x" ? r : (r & 0x3) | 0x8;
        return v.toString(16);
    });
}
</script>

Was this topic helpful?

Thank you!

Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!