This demo illustrates the DevExpress ASP.NET MVC UploadControl extension's drag and drop capability. It allows end-users to select one or more files and drag them to the UploadControl and add the files to the extension's file list.
By default, the drag and drop functionality is disabled. To enable it, switch the AdvancedModeSettings.EnableDragAndDrop property to true.
UploadControl allows you to provide external zones, where end-users can drop a file to add it to the upload control file list. You can specify an upload control drop zone using the AdvancedModeSettings.ExternalDropZoneID property. In this demo, a div element is used to add files to the upload control file list. When a file is being dragged over a drop zone, the following events are raised.
- The DropZoneEnter event is raised when the mouse enters a drop zone element while dragging a file.
- The DropZoneLeave event is raised when the mouse leaves a drop zone element while dragging a file.
In this demo, the events are handled to change zone style settings.
A list of files to upload, which visibility is controlled by the AdvancedModeSettings.EnableFileList property, is displayed below the control's text box, allowing end-users to remove a particular file from the list.
Local Copy of this Demo
To inspect the source code for this demo on your machine, you must first install our components via the DevExpress Component Installer.
You can open a local copy of this online demo directly from this webpage (if using v20.2.8, 21.1.4 or higher).
The source code files for this demo are installed (by default) in the following directory:
Open CS Solution
\Users\Public\Documents\DevExpress Demos XX.X\Components\ASP.NET\CS\MVCxFileManagerAndUploadDemos