Uploaded files

Default UploadControl

This example demonstrates the Bootstrap Upload Control control with default settings. The Bootstrap Upload Control provides an interface allowing 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.

Allowed file extensions: .jpg, .jpeg, .gif, .png.
Maximum file size: 4 MB.
<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>

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.
<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>

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.
<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>

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.
<dx:BootstrapUploadControl runat="server" ClientInstanceName="UploadControl"
    NullText="Click here to browse files..." UploadMode="Advanced" UploadStorage="Amazon" FileUploadMode="OnPageLoad"
    ShowUploadButton="True" ShowProgressPanel="True" OnFileUploadComplete="UploadControl_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">
    </ValidationSettings>
    <ClientSideEvents FilesUploadStart="onFilesUploadStart"
        FileUploadComplete="onFileUploadComplete" />
</dx:BootstrapUploadControl>

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.
<dx:BootstrapUploadControl runat="server" ClientInstanceName="UploadControl"
        NullText="Click here to browse files..." UploadMode="Advanced" UploadStorage="Azure" FileUploadMode="OnPageLoad"
        ShowUploadButton="True" ShowProgressPanel="True" OnFileUploadComplete="UploadControl_FileUploadComplete">
        <AzureSettings AccountName="UploadAzureAccount" ContainerName="uploadcontroldemo" />
        <AdvancedModeSettings EnableMultiSelect="True" EnableFileList="True" EnableDragAndDrop="True" />
        <ValidationSettings MaxFileSize="4194304" AllowedFileExtensions=".jpg,.jpeg,.gif,.png">
        </ValidationSettings>
        <ClientSideEvents FilesUploadStart="onFilesUploadStart"
            FileUploadComplete="onFileUploadComplete" />
    </dx:BootstrapUploadControl>

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.
<dx:BootstrapUploadControl runat="server" ClientInstanceName="UploadControl"
        NullText="Click here to browse files..." UploadMode="Advanced" UploadStorage="Dropbox" FileUploadMode="OnPageLoad"
        ShowUploadButton="True" ShowProgressPanel="True" OnFileUploadComplete="UploadControl_FileUploadComplete">
        <DropboxSettings AccountName="UploadDropboxAccount" />
        <AdvancedModeSettings EnableMultiSelect="True" EnableFileList="True" EnableDragAndDrop="True" PacketSize="4194304" />
        <ValidationSettings MaxFileSize="4194304" AllowedFileExtensions=".jpg,.jpeg,.gif,.png">
        </ValidationSettings>
        <ClientSideEvents FilesUploadStart="onFilesUploadStart"
            FileUploadComplete="onFileUploadComplete" />
    </dx:BootstrapUploadControl>
Screen Size
Color Themes
Demo QR Code