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.
Common error text is displayed here
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.
Common error text is displayed here
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.
Common error text is displayed here
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>