JavaScript/jQuery 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.
jQuery
index.js
$(function () { $("#{file-uploader}Container").dxFileUploader({ multiple: false, accept: "*", value: [], uploadMode: "instantly", uploadUrl: "https://js.devexpress.com/Demos/NetCore/FileUploader/Upload", onValueChanged: function (e) { var url = e.component.option("uploadUrl"); url = updateQueryStringParameter(url, "fileGuid", uuidv4()); e.component.option("uploadUrl", url); } }) .dxFileUploader("instance"); }); 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); }); }
Angular
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 {}
Vue
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>
React
App.js
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import FileUploader from "devextreme-react/file-uploader"; class App extends React.Component { constructor(props) { super(props); this.state = { multiple: false, uploadMode: "instantly", accept: "*", uploadUrl: "https://js.devexpress.com/Demos/NetCore/FileUploader/Upload" }; this.onSelectedFilesChanged = this.onSelectedFilesChanged.bind(this); } render() { return ( <div> <div className="widget-container"> <FileUploader multiple={this.state.multiple} accept={this.state.accept} uploadMode={this.state.uploadMode} uploadUrl={this.state.uploadUrl} onValueChanged={this.onSelectedFilesChanged} /> </div> </div> ); } onSelectedFilesChanged(e) { this.setState({ uploadUrl: this.updateQueryStringParameter("fileGuid", this.uuidv4()) }); } updateQueryStringParameter(key, value) { var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i"); var separator = this.state.uploadUrl.indexOf("?") !== -1 ? "&" : "?"; if (this.state.uploadUrl.match(re)) { return this.state.uploadUrl.replace(re, "$1" + key + "=" + value + "$2"); } else { return this.state.uploadUrl + 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); }); } export default App;
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>
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!
If you have technical questions, please create a support ticket in the DevExpress Support Center.