Uploaded files

Default Upload Control

The Bootstrap Upload Control allows your end-users to upload files to the server using the browser. End-users can select the files they wish to upload to the server by entering the file's path into a text box, by invoking the standard Open File dialog, or by dragging the file to the control. The Upload Control offers a number of advanced features such as uploading files via AJAX callbacks, built-in validation of the uploaded file against specified criteria (for instance, the file's size, extension and MIME types), and an enhanced client-side API.

Allowed file extensions: .jpg, .jpeg, .gif, .png.
Maximum file size: 4 MB.
ASPXC#JSCopy 
<dx:BootstrapUploadControl runat="server" ShowUploadButton="true" OnFileUploadComplete="UploadControl_FileUploadComplete">
    <ClientSideEvents FileUploadComplete="onFileUploadComplete" FilesUploadStart="onFilesUploadStart" />
    <ValidationSettings MaxFileSize="4194304" AllowedFileExtensions=".jpg,.jpeg,.gif,.png" />
</dx:BootstrapUploadControl>
<small>Allowed file extensions: .jpg, .jpeg, .gif, .png.</small>
<br />
<small>Maximum file size: 4 MB.</small>
protected void UploadControl_FileUploadComplete(object sender, FileUploadCompleteEventArgs e) {
    UploadedFile uploadedFile = e.UploadedFile;
    string fileName = uploadedFile.FileName;
    string resultExtension = Path.GetExtension(fileName);
    string resultFileName = Path.ChangeExtension(Path.GetRandomFileName(), resultExtension);
    string resultFileUrl = "~/Editors/UploadImages/" + resultFileName;
    string resultFilePath = MapPath(resultFileUrl);
    uploadedFile.SaveAs(resultFilePath);
    UploadingUtils.RemoveFileWithDelay(resultFileName, resultFilePath, 5);
    string url = ResolveClientUrl(resultFileUrl);
    var sizeInKilobytes = uploadedFile.ContentLength / 1024;
    string sizeText = sizeInKilobytes.ToString() + " KB";
    e.CallbackData = fileName + "|" + url + "|" + sizeText;
}
function onFilesUploadStart(s, e) {
    dxbsDemo.uploadedFilesContainer.hide();
}
function onFileUploadComplete(s, e) {
    if(e.callbackData) {
        var fileData = e.callbackData.split('|');
        var fileName = fileData[0],
            fileUrl = fileData[1],
            fileSize = fileData[2];
        dxbsDemo.uploadedFilesContainer.addFile(s, fileName, fileUrl, fileSize);
    }
}

Multi-File Selection

In this example, the Upload Control operates in the multi-file selection mode allowing you to select multiple files in a single file-open dialog. By default, this mode is disabled. To enable it, set the AdvancedModeSettings.EnableMultiSelect property to true.

Allowed file extensions: .jpg, .jpeg, .gif, .png.
Maximum file size: 4 MB.
ASPXCopy 
<dx:BootstrapUploadControl runat="server" ShowUploadButton="true" NullText="Select multiple files..."
    OnFileUploadComplete="UploadControl_FileUploadComplete">
    <ClientSideEvents FileUploadComplete="onFileUploadComplete" FilesUploadStart="onFilesUploadStart" />
    <ValidationSettings MaxFileSize="4194304" AllowedFileExtensions=".jpg,.jpeg,.gif,.png" />
    <AdvancedModeSettings EnableMultiSelect="true" EnableFileList="true" />
</dx:BootstrapUploadControl>
<small>Allowed file extensions: .jpg, .jpeg, .gif, .png.</small>
<br />
<small>Maximum file size: 4 MB.</small>

Drag and Drop Support

This example allows you to drag one or more files to the upload control to add these files to the control file list. By default, the drag and drop functionality is disabled. To enable it, set the UploadMode property to Advanced and switch the AdvancedModeSettings.EnableDragAndDrop property to true.

Allowed file extensions: .jpg, .jpeg, .gif, .png.
Maximum file size: 4 MB.
ASPXCopy 
<dx:BootstrapUploadControl runat="server" ShowUploadButton="true"
    ShowClearFileSelectionButton="true" ShowProgressPanel="true" ShowTextBox="true"
    UploadMode="Advanced" OnFileUploadComplete="UploadControl_FileUploadComplete">
    <ClientSideEvents FileUploadComplete="onFileUploadComplete" FilesUploadStart="onFilesUploadStart" />
    <ValidationSettings MaxFileSize="4194304" AllowedFileExtensions=".jpg,.jpeg,.gif,.png" />
    <AdvancedModeSettings EnableMultiSelect="true" EnableDragAndDrop="true" EnableFileList="true" />
</dx:BootstrapUploadControl>
<small>Allowed file extensions: .jpg, .jpeg, .gif, .png.</small>
<br />
<small>Maximum file size: 4 MB.</small>

File Upload to Amazon

The Upload Control allows you to upload files to the most popular cloud services.

In this demo, the Upload Control's UploadStorage property is set to Amazon (Amazon Simple Storage Service). To connect the Upload Control to Amazon cloud storage, register an Amazon account in the global.asax file using the RegisterAmazon method and then specify the following settings provided by the AmazonSettings property.

  • AccountName - Specifies the name of an Amazon account
  • BucketName - Specifies the name of the current bucket
Allowed file extensions: .jpg, .jpeg, .gif, .png.
Maximum file size: 4 MB.
ASPXC#Global.asaxCopy 
<dx:BootstrapUploadControl ID="UploadControlAmazon" runat="server" ClientInstanceName="UploadControl"
    NullText="Click here to browse files..." UploadMode="Advanced" UploadStorage="Amazon" FileUploadMode="OnPageLoad"
    ShowUploadButton="True" ShowProgressPanel="True" OnFileUploadComplete="UploadControlAmazon_FileUploadComplete">
    <AmazonSettings AccountName="UploadAmazonAccount" BucketName="dxuploaddemo" Region="us-east-1" />
    <AdvancedModeSettings EnableMultiSelect="True" EnableFileList="True" EnableDragAndDrop="True" PacketSize="5242880" />
    <ValidationSettings MaxFileSize="4194304" AllowedFileExtensions=".jpg,.jpeg,.gif,.png" />
    <ClientSideEvents FilesUploadStart="onFilesUploadStart" FileUploadComplete="onFileUploadComplete" />
</dx:BootstrapUploadControl>
<small>Allowed file extensions: .jpg, .jpeg, .gif, .png.</small>
<br />
<small>Maximum file size: 4 MB.</small>
protected void UploadControlAmazon_FileUploadComplete(object sender, FileUploadCompleteEventArgs e) {
    UploadedFile uploadedFile = e.UploadedFile;
    string accountName = UploadControlAmazon.AmazonSettings.AccountName;
    string bucketName = UploadControlAmazon.AmazonSettings.BucketName;
    string region = UploadControlAmazon.AmazonSettings.Region;
    UploadingUtils.RemoveFileFromAmazonWithDelay(uploadedFile.FileNameInStorage, accountName, bucketName, region, 5);
    AmazonFileSystemProvider provider = new AmazonFileSystemProvider("") {
        AccountName = accountName,
        BucketName = bucketName,
        Region = region
    };
    string fileName = uploadedFile.FileName;
    FileManagerFile[] files = new FileManagerFile[] { new FileManagerFile(provider, fileName) };
    string url = provider.GetDownloadUrl(files);
    var sizeInKilobytes = uploadedFile.ContentLength / 1024;
    string sizeText = sizeInKilobytes.ToString() + " KB";
    e.CallbackData = fileName + "|" + url + "|" + sizeText;
}
<%@ Application Language="C#" %>
<%@ Import Namespace="DevExpress.Web" %>
<script RunAt="server">
    static System.Web.UI.Page CurrentPage {
        get { return HttpContext.Current.CurrentHandler as System.Web.UI.Page; }
    }
    void Application_Start(object sender, EventArgs e) {
        RegisterAccounts();
    }
    void RegisterAccounts() {
        //Upload Control
        AccountManager.RegisterAmazon("UploadAmazonAccount", CloudStoragesUtils.GetUploadAmazonAccessKeyID(), CloudStoragesUtils.GetUploadAmazonSecretAccessKey());
        AccountManager.RegisterAzure("UploadAzureAccount", CloudStoragesUtils.GetAzureStorageAccountName(), CloudStoragesUtils.GetUploadAzureAccessKey());
        AccountManager.RegisterDropbox("UploadDropboxAccount", CloudStoragesUtils.GetUploadDropboxAccessTokenValue());
        //File Manager
        AccountManager.RegisterAmazon("FileManagerAmazonAccount", CloudStoragesUtils.GetFileManagerAmazonAccessKeyID(), CloudStoragesUtils.GetFileManagerAmazonSecretAccessKey());
        AccountManager.RegisterAzure("FileManagerAzureAccount", CloudStoragesUtils.GetAzureStorageAccountName(), CloudStoragesUtils.GetFileManagerAzureAccessKey());
        AccountManager.RegisterDropbox("FileManagerDropboxAccount", CloudStoragesUtils.GetFileManagerDropboxAccessTokenValue());
        AccountManager.RegisterOneDrive("FileManagerOneDriveAccount", CloudStoragesUtils.GetFileManagerOneDriveClientIDValue(), CloudStoragesUtils.GetFileManagerOneDriveClientSecretValue());
        AccountManager.RegisterGoogleDrive("FileManagerGoogleDriveAccount", CloudStoragesUtils.GetFileManagerGoogleDriveClientEmailValue(), CloudStoragesUtils.GetFileManagerGoogleDrivePrivateKeyValue());
    }
</script>

File Upload to Azure

To connect the Upload Control to Azure cloud storage, register an Azure account in the global.asax file using the RegisterAzure method and then specify the following settings provided by the AzureSettings property.

  • AccountName - Specifies the name of an Azure account
  • ContainerName - Specifies the name of the current container (blob storage)
Allowed file extensions: .jpg, .jpeg, .gif, .png.
Maximum file size: 4 MB.
ASPXC#Global.asaxCopy 
<dx:BootstrapUploadControl ID="UploadControlAzure" runat="server" ClientInstanceName="UploadControl"
    NullText="Click here to browse files..." UploadMode="Advanced" UploadStorage="Azure" FileUploadMode="OnPageLoad"
    ShowUploadButton="True" ShowProgressPanel="True" OnFileUploadComplete="UploadControlAzure_FileUploadComplete">
    <AzureSettings AccountName="UploadAzureAccount" ContainerName="uploadcontroldemo" />
    <AdvancedModeSettings EnableMultiSelect="True" EnableFileList="True" EnableDragAndDrop="True" />
    <ValidationSettings MaxFileSize="4194304" AllowedFileExtensions=".jpg,.jpeg,.gif,.png" />
    <ClientSideEvents FilesUploadStart="onFilesUploadStart" FileUploadComplete="onFileUploadComplete" />
</dx:BootstrapUploadControl>
<small>Allowed file extensions: .jpg, .jpeg, .gif, .png.</small>
<br />
<small>Maximum file size: 4 MB.</small>
protected void UploadControlAzure_FileUploadComplete(object sender, FileUploadCompleteEventArgs e) {
    UploadedFile uploadedFile = e.UploadedFile;
    string accountName = UploadControlAzure.AzureSettings.AccountName;
    string containerName = UploadControlAzure.AzureSettings.ContainerName;
    UploadingUtils.RemoveFileFromAzureWithDelay(uploadedFile.FileNameInStorage, accountName, containerName, 5);
    AzureFileSystemProvider provider = new AzureFileSystemProvider("") {
        AccountName = accountName,
        ContainerName = containerName
    };
    string fileName = uploadedFile.FileName;
    FileManagerFile[] files = new FileManagerFile[] { new FileManagerFile(provider, fileName) };
    string url = provider.GetDownloadUrl(files);
    var sizeInKilobytes = uploadedFile.ContentLength / 1024;
    string sizeText = sizeInKilobytes.ToString() + " KB";
    e.CallbackData = fileName + "|" + url + "|" + sizeText;
}
<%@ Application Language="C#" %>
<%@ Import Namespace="DevExpress.Web" %>
<script RunAt="server">
    static System.Web.UI.Page CurrentPage {
        get { return HttpContext.Current.CurrentHandler as System.Web.UI.Page; }
    }
    void Application_Start(object sender, EventArgs e) {
        RegisterAccounts();
    }
    void RegisterAccounts() {
        //Upload Control
        AccountManager.RegisterAmazon("UploadAmazonAccount", CloudStoragesUtils.GetUploadAmazonAccessKeyID(), CloudStoragesUtils.GetUploadAmazonSecretAccessKey());
        AccountManager.RegisterAzure("UploadAzureAccount", CloudStoragesUtils.GetAzureStorageAccountName(), CloudStoragesUtils.GetUploadAzureAccessKey());
        AccountManager.RegisterDropbox("UploadDropboxAccount", CloudStoragesUtils.GetUploadDropboxAccessTokenValue());
        //File Manager
        AccountManager.RegisterAmazon("FileManagerAmazonAccount", CloudStoragesUtils.GetFileManagerAmazonAccessKeyID(), CloudStoragesUtils.GetFileManagerAmazonSecretAccessKey());
        AccountManager.RegisterAzure("FileManagerAzureAccount", CloudStoragesUtils.GetAzureStorageAccountName(), CloudStoragesUtils.GetFileManagerAzureAccessKey());
        AccountManager.RegisterDropbox("FileManagerDropboxAccount", CloudStoragesUtils.GetFileManagerDropboxAccessTokenValue());
        AccountManager.RegisterOneDrive("FileManagerOneDriveAccount", CloudStoragesUtils.GetFileManagerOneDriveClientIDValue(), CloudStoragesUtils.GetFileManagerOneDriveClientSecretValue());
        AccountManager.RegisterGoogleDrive("FileManagerGoogleDriveAccount", CloudStoragesUtils.GetFileManagerGoogleDriveClientEmailValue(), CloudStoragesUtils.GetFileManagerGoogleDrivePrivateKeyValue());
    }
</script>

File Upload to Dropbox

To connect the Upload Control to Dropbox cloud storage, register a Dropbox account in the global.asax file using the RegisterDropbox method and then specify the following settings provided by the DropboxSettings property.

  • AccountName - Specifies the name of a Dropbox account
Allowed file extensions: .jpg, .jpeg, .gif, .png.
Maximum file size: 4 MB.
ASPXC#Global.asaxCopy 
<dx:BootstrapUploadControl ID="UploadControlDropbox" runat="server" ClientInstanceName="UploadControl"
    NullText="Click here to browse files..." UploadMode="Advanced" UploadStorage="Dropbox" FileUploadMode="OnPageLoad"
    ShowUploadButton="True" ShowProgressPanel="True" OnFileUploadComplete="UploadControlDropbox_FileUploadComplete">
    <DropboxSettings AccountName="UploadDropboxAccount" />
    <AdvancedModeSettings EnableMultiSelect="True" EnableFileList="True" EnableDragAndDrop="True" PacketSize="4194304" />
    <ValidationSettings MaxFileSize="4194304" AllowedFileExtensions=".jpg,.jpeg,.gif,.png" />
    <ClientSideEvents FilesUploadStart="onFilesUploadStart" FileUploadComplete="onFileUploadComplete" />
</dx:BootstrapUploadControl>
<small>Allowed file extensions: .jpg, .jpeg, .gif, .png.</small>
<br />
<small>Maximum file size: 4 MB.</small>
protected void UploadControlDropbox_FileUploadComplete(object sender, FileUploadCompleteEventArgs e) {
    UploadedFile uploadedFile = e.UploadedFile;
    string accountName = UploadControlDropbox.DropboxSettings.AccountName;
    UploadingUtils.RemoveFileFromDropboxWithDelay(uploadedFile.FileNameInStorage, accountName, 5);
    DropboxFileSystemProvider provider = new DropboxFileSystemProvider("") { AccountName = accountName };
    string name = uploadedFile.FileName;
    FileManagerFile[] files = new FileManagerFile[] { new FileManagerFile(provider, name) };
    string url = provider.GetDownloadUrl(files);
    var sizeInKilobytes = uploadedFile.ContentLength / 1024;
    string sizeText = sizeInKilobytes.ToString() + " KB";
    e.CallbackData = name + "|" + url + "|" + sizeText;
}
<%@ Application Language="C#" %>
<%@ Import Namespace="DevExpress.Web" %>
<script RunAt="server">
    static System.Web.UI.Page CurrentPage {
        get { return HttpContext.Current.CurrentHandler as System.Web.UI.Page; }
    }
    void Application_Start(object sender, EventArgs e) {
        RegisterAccounts();
    }
    void RegisterAccounts() {
        //Upload Control
        AccountManager.RegisterAmazon("UploadAmazonAccount", CloudStoragesUtils.GetUploadAmazonAccessKeyID(), CloudStoragesUtils.GetUploadAmazonSecretAccessKey());
        AccountManager.RegisterAzure("UploadAzureAccount", CloudStoragesUtils.GetAzureStorageAccountName(), CloudStoragesUtils.GetUploadAzureAccessKey());
        AccountManager.RegisterDropbox("UploadDropboxAccount", CloudStoragesUtils.GetUploadDropboxAccessTokenValue());
        //File Manager
        AccountManager.RegisterAmazon("FileManagerAmazonAccount", CloudStoragesUtils.GetFileManagerAmazonAccessKeyID(), CloudStoragesUtils.GetFileManagerAmazonSecretAccessKey());
        AccountManager.RegisterAzure("FileManagerAzureAccount", CloudStoragesUtils.GetAzureStorageAccountName(), CloudStoragesUtils.GetFileManagerAzureAccessKey());
        AccountManager.RegisterDropbox("FileManagerDropboxAccount", CloudStoragesUtils.GetFileManagerDropboxAccessTokenValue());
        AccountManager.RegisterOneDrive("FileManagerOneDriveAccount", CloudStoragesUtils.GetFileManagerOneDriveClientIDValue(), CloudStoragesUtils.GetFileManagerOneDriveClientSecretValue());
        AccountManager.RegisterGoogleDrive("FileManagerGoogleDriveAccount", CloudStoragesUtils.GetFileManagerGoogleDriveClientEmailValue(), CloudStoragesUtils.GetFileManagerGoogleDrivePrivateKeyValue());
    }
</script>
Screen Size
Color Themes
Demo QR Code