Your search did not match any results.

Direct Upload to Azure

The FileUploader component supports direct-upload to blob storages. This demo illustrates how to configure the uploadChunk property to upload a large file directly to Azure Blob Storage without using a user's web server. All APIs that implement access to Azure Blob Storage on the client are stored in the azure-file-system.js file.

To implement file upload logic, use the uploadChunk property to specify how to process a connection request to the storage.

Backend API
@model DevExtreme.NETCore.Demos.Models.FileManagement.AzureStorageAccount @if(!Model.IsEmpty()) { @(Html.DevExtreme().FileUploader() .ID("file-uploader") .ChunkSize(200000) .MaxFileSize(1048576) .UploadChunk("uploadChunk") ) <text> <div id="request-panel"></div> <script src="~/utils/azure-file-system.js"></script> <script> function uploadChunk(file, uploadInfo) { var deferred = null; if(uploadInfo.chunkIndex === 0) { deferred = gateway.getUploadAccessUrl(file.name).done(function(accessUrl) { uploadInfo.customData.accessUrl = accessUrl; }); } else { deferred = $.Deferred().resolve().promise(); } deferred = deferred.then(function() { return gateway.putBlock(uploadInfo.customData.accessUrl, uploadInfo.chunkIndex, uploadInfo.chunkBlob); }); if(uploadInfo.chunkIndex === uploadInfo.chunkCount - 1) { deferred = deferred.then(function() { return gateway.putBlockList(uploadInfo.customData.accessUrl, uploadInfo.chunkCount); }); } return deferred.promise(); } 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) ); } var endpointUrl = '@Url.RouteUrl("FileUploaderAzureAccessApi")'; var gateway = new AzureGateway(endpointUrl, onRequestExecuted); </script> </text> } else { <text> To run the demo locally, specify your Azure storage account name, access key and container name in the appsettings.json file. Refer to the <a href="https://demos.devexpress.com/ASPNetCore/Demo/FileUploader/AzureDirectUploading/" target="_blank"> https://demos.devexpress.com/ASPNetCore/Demo/FileUploader/AzureDirectUploading/ </a> to see the demo online. </text> }
using DevExtreme.NETCore.Demos.Models.FileManagement; using Microsoft.AspNetCore.Cors; using Microsoft.AspNetCore.Http; using Microsoft.AspNetCore.Mvc; using Newtonsoft.Json; using System; using System.Collections.Generic; using System.IO; using System.Linq; namespace DevExtreme.NETCore.Demos.Controllers { public partial class FileUploaderController : Controller { public ActionResult AzureDirectUploading() { return View(AzureStorageAccount.FileUploader); } } }
using DevExtreme.NETCore.Demos.Models.FileManagement; using System; using System.Net.Http; using System.Web.Http; using Azure.Storage; using Azure.Storage.Sas; using Azure.Storage.Blobs; using Azure.Storage.Blobs.Specialized; using Microsoft.AspNetCore.Mvc; namespace DevExtreme.NETCore.Demos.Controllers.ApiControllers { public class FileUploaderAzureAccessApiController : Controller { const long MaxBlobSize = 1048576; const string ServiceUri = "https://{0}.blob.core.windows.net"; BlobServiceClient _client; BlobServiceClient Client { get { if(_client == null) { AzureStorageAccount accountModel = AzureStorageAccount.FileUploader; StorageSharedKeyCredential credential = new StorageSharedKeyCredential(accountModel.AccountName, accountModel.AccessKey); _client = new BlobServiceClient(new Uri(string.Format(ServiceUri, accountModel.AccountName)), credential); } return _client; } } BlobContainerClient _container; BlobContainerClient Container { get { if(_container == null) { AzureStorageAccount accountModel = AzureStorageAccount.FileUploader; _container = Client.GetBlobContainerClient(accountModel.ContainerName); } return _container; } } [Route("api/file-uploader-azure-access", Name = "FileUploaderAzureAccessApi")] public object Process(string command, string blobName) { try { return UploadBlob(blobName); } catch { return CreateErrorResult(); } } object UploadBlob(string blobName) { if(blobName.Contains("/")) return CreateErrorResult("Invalid blob name."); string prefix = Guid.NewGuid().ToString("N"); string fullBlobName = $"{prefix}_{blobName}"; var blob = Container.GetBlockBlobClient(fullBlobName); if(blob.Exists() && blob.GetProperties().Value.ContentLength > MaxBlobSize) { return CreateErrorResult(); } if(blob.CanGenerateSasUri) { var sasUri = blob.GenerateSasUri(BlobSasPermissions.Write, DateTimeOffset.UtcNow.AddHours(1)); return CreateSuccessResult(sasUri.AbsoluteUri); } else { return CreateErrorResult("BlobClient cannot generate SasUri"); } } object CreateSuccessResult(string url, string url2 = null) { return new { success = true, accessUrl = url, accessUrl2 = url2 }; } object CreateErrorResult(string error = null) { if(string.IsNullOrEmpty(error)) error = "Unspecified error."; return new { success = false, error = error }; } } }
#request-panel { min-width: 505px; height: 400px; overflow-x: hidden; overflow-y: auto; padding: 18px; margin-top: 40px; background-color: rgba(191, 191, 191, 0.15); } #request-panel .parameter-info { display: flex; } .request-info .parameter-name { flex: 0 0 100px; } .request-info .parameter-name, .request-info .parameter-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }