Index.cshtml

@using ASP_NET_Core.Models
<script type="text/javascript" src="~/js/amazon.filesystem.js"></script>
<script type="text/javascript" src="~/js/amazon.gateway.js"></script>

<div id="wrapper">
    <div id="widget-area">
        @(Html.DevExtreme().FileUploader()
            .ID("file-uploader")
            .ChunkSize(5242880)
            .UploadChunk("uploadChunk")
            .AbortUpload("abortUpload")
            .OnValueChanged("onValueChanged")
            .OnUploaded("onUploaded")
            )
        <div id="download-panel"></div>
        <div id="request-panel"></div>
    </div>
    @(Html.DevExtreme().LoadPanel()
        .ID("load-panel")
        .Visible(true)
        .Position(p => p.Of("#widget-area"))
    )
    <div id="message-box">
        To run the demo locally, specify your Amazon access key, secret key, region and bucket name in the appsettings.json file in your back-end app.
    </div>
</div>

<script>
$.ajax({
    url: 'https://localhost:52366/api/AmazonS3/getItems',
    success(result) {
        result.active = true;
        const className = result.active ? 'show-widget' : 'show-message';
        $('#wrapper').addClass(className);
        $("#load-panel").dxLoadPanel("hide");
    },
    error() {
        $("#load-panel").dxLoadPanel("hide");
    }
});


async function onUploaded(e) {
    const url = await amazon.getPresignedDownloadUrl(e.file.name);
    showPresignedUrl(url, e.file.name);
}

async function abortUpload(file, uploadInfo) {
    return amazon.abortUpload(file, uploadInfo);
}

function onValueChanged(e) {
    hidePresignedUrl();
}

async function uploadChunk(file, uploadInfo) {
    return amazon.uploadFileChunk(file, uploadInfo);    
};

function showPresignedUrl(url, fileName) {
$('<div>')
    .attr('id', 'url-div')
    .append(
        $('<span>').text('Download uploaded file: '),
        $('<a>')
            .attr('href', url)
            .attr('target', '_blank')
            .text(fileName)
    )
    .appendTo('#download-panel');
}

function hidePresignedUrl() {
    $('#url-div').remove();
}

function onRequestExecuted(e) {
    $("<div>").addClass("request-info").append(
        createParameterInfoDiv("Method:", e.method),
        createParameterInfoDiv("Url path:", e.urlPath),
        createParameterInfoDiv("Query string:", e.queryString),
        $("<br>")
    )
    .prependTo("#request-panel");
}

function createParameterInfoDiv(name, value) {
    return $("<div>").addClass("parameter-info").append(
        $("<div>").addClass("parameter-name").text(name),
        $("<div>").addClass("parameter-value dx-theme-accent-as-text-color").text(value).attr("title", value)
    );
}

const endpointUrl = 'https://localhost:52366/api/AmazonS3';
const amazon = new AmazonFileSystem(endpointUrl, onRequestExecuted);
</script>