DxUpload.ExternalDropZoneCssSelector Property

Specifies the CSS selector of a container or HTML element wherein users can drop files to upload.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v26.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.

Remarks

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 to be applied to the drop zone.

The following code snippet implements drag and drop functionality. Note that the code snippet uses Bootstrap classes. To render elements correctly, enable the UseBootstrapStyles option in theme settings.

Razor

<div id="overviewDemoDropZone" class="card custom-drop-zone rounded-3 w-100 m-0">
    <span class="drop-file-icon mb-3"></span>
    <span>Drag and Drop File Here</span>
</div>
<DxUpload Name="myFile"
          UploadUrl="https://localhost:10000/api/Upload/Upload/"
          ExternalDropZoneCssSelector="#overviewDemoDropZone"
          ExternalDropZoneDragOverCssClass="custom-drop-zone-hover"
          MaxFileSize="15000000" />
<div class="upload-validation-text info-text">
    Uploads are limited to a single file up to 15 MB.
</div>

CSS

.custom-drop-zone {
    padding: 0 !important;
    border-style: dashed;
    border-width: 2px !important;
    height: 230px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba(183, 183, 183, 0.1);
}
.custom-drop-zone.custom-drop-zone-hover {
    border-style: solid;
}
.custom-drop-zone svg {
    width: 42px;
    height: 42px;
}
/*BeginHide*/::deep/*EndHide*/.custom-drop-zone > *:not(#overviewDemoSelectButton) {
    pointer-events: none;
}

/*BeginHide*/::deep/*EndHide*/.upload-validation-text {
    flex-direction: column;
    align-items: flex-end;
    font-size: 12px;
 }

UploadController

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;

namespace BlazorDemo.AspNetCoreHost;
[Route("api/[controller]")]
[ApiController]
public class UploadController : ControllerBase {
    [HttpPost("[action]")]
    public ActionResult Upload(IFormFile myFile) {
        try {
            // Write code that saves the 'myFile' file.
            // Don't rely on or trust the FileName property without validation.
        } catch {
            return BadRequest();
        }
        return Ok();
    }
}

Run Demo: Upload - Overview