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.
<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.
<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.
<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>
Screen Size
Color Themes
Demo QR Code