Angular 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.component.html

app.component.ts


<dx-file-uploader
    [(uploadUrl)]="uploadUrl"
    [multiple]="false"
    uploadMode="instantly"
    (onValueChanged)="onValueChanged($event)">
</dx-file-uploader>


import { Component, NgModule } from '@angular/core';
import { BrowserModule } from "@angular/platform-browser";
import { DxFileUploaderModule } from "devextreme-angular";
 
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    value: any[] = [];
    uploadUrl: string = "https://js.devexpress.com/Demos/NetCore/FileUploader/Upload";
    onValueChanged(e) {
        this.uploadUrl = this.updateQueryStringParameter("fileGuid", this.uuidv4());
    }
    updateQueryStringParameter(key, value) {
        var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
        var separator = this.uploadUrl.indexOf("?") !== -1 ? "&" : "?";
        if (this.uploadUrl.match(re)) {
            return this.uploadUrl.replace(re, "$1" + key + "=" + value + "$2");
        } else {
            return this.uploadUrl + separator + key + "=" + value;
        }
    }
    //https://stackoverflow.com/questions/105034/how-to-create-guid-uuid
    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);
        });
    }
}
 
@NgModule({
    imports: [BrowserModule, DxFileUploaderModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule {}

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!