DxUpload.ExternalDropZoneCssSelector Property
Specifies the CSS selector of a container or HTML element where users can drop files to upload.
Namespace: DevExpress.Blazor
Assembly:
DevExpress.Blazor.v21.1.dll
NuGet Package:
DevExpress.Blazor
Declaration
[Parameter]
public string ExternalDropZoneCssSelector { get; set; }
Property Value
Type |
Description |
String |
The CSS selector of a container or HTML element where users can drop files.
|
Use the ExternalDropZoneCssSelector property to enable drag and drop functionality in the Upload. This property specifies the CSS selector of an external zone where users can drop files to upload.
You can also use the ExternalDropZoneDragOverCssClass to define the CSS class that is applied to the drop zone when users drag files over it.
<div id="overviewDemoDropZone" class="card custom-drop-zone jumbotron">
<svg class="drop-file-icon mb-3" role="img" style="width: 42px; height: 42px;"><use href="#drop-file-icon"></use></svg>
<span>Drag and Drop File Here</span>
</div>
<DxUpload Name="myFile" UploadUrl="https://localhost:10000/api/Upload/UploadFile/"
ExternalDropZoneCssSelector="#overviewDemoDropZone"
ExternalDropZoneDragOverCssClass="custom-drag-over border-light text-white">
</DxUpload>
.custom-drop-zone {
padding: 0 !important;
border-style: dashed !important;
border-width: 2px !important;
height: 230px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.custom-drop-zone.custom-drag-over {
background-color: #868A8D;
}
.custom-drop-zone img {
width: 42px;
height: 42px;
}
using System.IO;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
[Route("api/[controller]")]
public class UploadController : ControllerBase {
private readonly IWebHostEnvironment _hostingEnvironment;
public UploadController(IWebHostEnvironment hostingEnvironment) {
_hostingEnvironment = hostingEnvironment;
}
[HttpPost]
[Route("UploadFile")]
// "myFile" is the value of the Upload's "Name" property.
public ActionResult UploadFile(IFormFile myFile) {
try {
// Specify the target location for the uploaded files.
var path = Path.Combine(_hostingEnvironment.WebRootPath, "uploads");
// Check whether the target directory exists; otherwise, create it.
if (!Directory.Exists(path))
Directory.CreateDirectory(path);
using (var fileStream = System.IO.File.Create(Path.Combine(path, myFile.FileName))) {
// Check the file here (its extension, safity, and so on).
// If all checks are passed, save the file.
myFile.CopyTo(fileStream);
}
} catch {
Response.StatusCode = 400;
}
return new EmptyResult();
}
}
Run Demo: Upload - Overview
See Also