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