React FileUploader - Get a file's Guid after uploading in chunks

Follow the steps below to get a file's GUID in 'chunk' upload mode:

  1. Get the FileGuid value from the chunkMetadata parameter on the server.
  2. Pass it to the response header.
  3. Get the response header in the uploaded or progress event handlers.
ASP.NET Core Backend
<!-- CS -->
[HttpPost]
public ActionResult UploadChunk(IFormFile file, string chunkMetadata) {
    try {
        if(!string.IsNullOrEmpty(chunkMetadata)) {
            var metaDataObject = JsonConvert.DeserializeObject<ChunkMetadata>(chunkMetadata);
            Response.Headers.Add("File-Guid", metaDataObject.FileGuid);
        }
    } catch {
        return BadRequest();
    }
    return Ok();
}
jQuery
index.js
$(function () {
    $("#file-uploader").dxFileUploader({
        name: "file",
        accept: "image/*",
        uploadUrl: "https://js.devexpress.com/Demos/WidgetsGalleryDataService/api/ChunkUpload",
        chunkSize: 200000,
        onUploaded:onUploaded
    });
});
function onUploaded(e) {
    console.log(e.request.getResponseHeader('File-Guid'));
}
Angular
app.component.html
app.component.ts
<dx-file-uploader
    name="file"
    accept="image/*"
    uploadUrl="https://js.devexpress.com/Demos/WidgetsGalleryDataService/api/ChunkUpload"
    [chunkSize]="200000"
    (onUploaded)="onUploaded($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 {
    onUploaded(e){
        console.log(e.request.getResponseHeader("File-Guid"));
    }
}

@NgModule({
    imports: [BrowserModule, DxFileUploaderModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule {}
Vue
App.vue
<template>
  <DxFileUploader
    :chunk-size="200000"
    name="file"
    accept="image/*"
    upload-url="https://js.devexpress.com/Demos/WidgetsGalleryDataService/api/ChunkUpload"
    @uploaded="onUploaded($event)"
  />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxFileUploader } from "devextreme-vue/file-uploader";

export default {
    components: {
        DxFileUploader
    },
    data() { ... },
    methods: {
        onUploaded(e) {
            console.log(e.request.getResponseHeader("File-Guid"));
        }            
    }
}
</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.onUploaded = this.onUploaded.bind(this);
    }

render() {
    return (
        <FileUploader 
            name="file" 
            accept="image/*" 
            uploadUrl="https://js.devexpress.com/Demos/WidgetsGalleryDataService/api/ChunkUpload"
            chunkSize={200000} 
            onUploaded={this.onUploaded} 
        />
    );
}
onUploaded(e) {
console.log(e.request.getResponseHeader("File-Guid"));
}

export default App;
ASP.NET MVC/CORE Controls
@(Html.DevExtreme().FileUploader()
    .ID("file-uploader")
    .Name("file")
    .Accept("image/*")
    .Multiple(false)
    .ChunkSize(200000)
    .AllowedFileExtensions(new[] { ".jpg", ".jpeg", ".gif", ".png" })
    .MaxFileSize(4000000)
    .OnUploaded("onUploaded")
    .UploadUrl(Url.Action("UploadChunk", "FileUploader"))
)
<script>
function onUploaded(e) {
        console.log(e.request.getResponseHeader('File-Guid'));
    }
</script>