DxUpload.ShowSelectButton Property
Specifies whether to show the select button that invokes the open file dialog.
Namespace: DevExpress.Blazor
Assembly:
DevExpress.Blazor.v21.1.dll
NuGet Package:
DevExpress.Blazor
Declaration
[Parameter]
public bool ShowSelectButton { get; set; }
Property Value
Type |
Description |
Boolean |
true, to show the select button; otherwise, false.
|
The Upload displays the Select File button that invokes the open file dialog.
Set the ShowSelectButton property to false to hide this button. Use the ExternalDropZoneCssSelector and ExternalDropZoneDragOverCssClass to implement drag and drop functionality.
<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 System.Linq;
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();
}
}
You can also use the ExternalSelectButtonCssSelector property to implement an external select button.
See Also