React 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.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;