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.

Copy to CodePen
Apply
Reset
$(function() { var loadPanel = $("#load-panel").dxLoadPanel({ position: { of: "#file-uploader" } }).dxLoadPanel("instance"); $.ajax({ url: "https://js.devexpress.com/Demos/Mvc/api/file-manager-azure-status?widgetType=fileUploader", success: function(result) { var className = result.active ? "show-widget" : "show-message"; $("#wrapper").addClass(className); loadPanel.hide(); } }); var endpointUrl = "https://js.devexpress.com/Demos/Mvc/api/file-uploader-azure-access"; var gateway = new AzureGateway(endpointUrl); var uploadChunk = function(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; }; $("#file-uploader").dxFileUploader({ multiple: true, chunkSize: 200000, accept: "*", maxFileSize: 1048576, uploadChunk: uploadChunk }); });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <script src="utils/azure-file-system.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.3/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.3/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/19.2.3/js/dx.all.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="data.js"></script> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="wrapper"> <div id="file-uploader"></div> <div id="load-panel"></div> <div id="message-box"> 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/jQuery/Light/"> https://js.devexpress.com/Demos/WidgetsGallery/Demo/FileUploader/AzureDirectUploading/jQuery/Light/</a> to see the demo online. </div> </div> </div> </body> </html>
#wrapper #file-uploader { visibility: hidden; } #wrapper #message-box { display: none; } #wrapper.show-widget #file-uploader { visibility: visible; } #wrapper.show-message #file-uploader { display: none; } #wrapper.show-message #message-box { display: block; }