Your search did not match any results.
File Uploader

Direct Upload to Azure

The FileUploader widget supports direct-upload to blob storages. This demo illustrates how to configure the uploadChunk option to upload a large file directly to Azure Blob Storage without using a user's web server.

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

@model DevExtreme.MVC.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="~/Scripts/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.HttpRouteUrl("FileUploaderAzureAccessApi", null)'; 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 web.config file. Refer to the <a href="https://js.devexpress.com/Demos/WidgetsGallery/Demo/FileUploader/AzureDirectUploading/Mvc/Light/"> https://js.devexpress.com/Demos/WidgetsGallery/Demo/FileUploader/AzureDirectUploading/Mvc/Light/ </a> to see the demo online. </text> }
using DevExtreme.MVC.Demos.Models.FileManagement; using Newtonsoft.Json; using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Net; using System.Web; using System.Web.Http.Results; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class FileUploaderController : Controller { public ActionResult AzureDirectUploading() { return View(AzureStorageAccount.FileUploader.Value); } } }
using DevExtreme.MVC.Demos.Models.FileManagement; using Microsoft.Azure.Storage; using Microsoft.Azure.Storage.Auth; using Microsoft.Azure.Storage.Blob; using System; using System.Net.Http; using System.Web.Http; namespace DevExtreme.MVC.Demos.Controllers.ApiControllers { public class FileUploaderAzureAccessApiController : ApiController { const long MaxBlobSize = 1048576; CloudBlobClient _client; CloudBlobClient Client { get { if(this._client == null) { AzureStorageAccount accountModel = AzureStorageAccount.FileUploader.Value; var credentials = new StorageCredentials(accountModel.AccountName, accountModel.AccessKey); var account = new CloudStorageAccount(credentials, true); this._client = account.CreateCloudBlobClient(); } return this._client; } } CloudBlobContainer _container; CloudBlobContainer Container { get { if(this._container == null) { AzureStorageAccount accountModel = AzureStorageAccount.FileUploader.Value; this._container = Client.GetContainerReference(accountModel.ContainerName); } return this._container; } } [HttpGet] [Route("api/file-uploader-azure-access", Name = "FileUploaderAzureAccessApi")] public HttpResponseMessage Process(string command, string blobName) { object result; try { result = UploadBlob(blobName); } catch { result = CreateErrorResult(); } return Request.CreateResponse(result); } object UploadBlob(string blobName) { if(blobName.Contains("/")) return CreateErrorResult("Invalid blob name."); string prefix = Guid.NewGuid().ToString("N"); string fullBlobName = $"{prefix}_{blobName}"; CloudBlockBlob blob = Container.GetBlockBlobReference(fullBlobName); if(blob.Exists() && blob.Properties.Length > MaxBlobSize) { blob.Delete(); return CreateErrorResult(); } var policy = new SharedAccessBlobPolicy { SharedAccessExpiryTime = DateTime.UtcNow.AddMinutes(1), Permissions = SharedAccessBlobPermissions.Write }; string url = blob.Uri + blob.GetSharedAccessSignature(policy, null, null, SharedAccessProtocol.HttpsOnly, null); return CreateSuccessResult(url); } 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; }