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

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 that is applied to the drop zone when users drag files over it.

Razor

<div id="overviewDemoDropZone" class="card custom-drop-zone bg-light">
    <span class="drop-file-icon icon-margin"></span>
    <span>Drag and Drop File Here</span><span class="margin-style">
</div>
<DxUpload Name="myFile" 
          UploadUrl="https://localhost:10000/api/Upload/Upload/"
          ExternalDropZoneCssSelector="#overviewDemoDropZone"
          ExternalDropZoneDragOverCssClass="custom-drop-zone-hover" >
</DxUpload>

CSS

.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;
    margin: 0;
    width: 100%;
    border-radius: var(--dxds-border-radius-80);
}
.custom-drop-zone.custom-drop-zone-hover {
    border-style: solid;
}
.custom-drop-zone svg {
    width: 42px;
    height: 42px;
}
.drop-file-icon {
    background-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;
    width: 48px;
    height: 48px;
    -webkit-mask-image: url("../images/icons/drop-file.svg");
    mask-image: url("../images/icons/drop-file.svg");
}
.icon-margin {
    margin-bottom: 1rem;
}
.drag-zone {
    color: var(--dxds-color-content-neutral-default-rest);
}
.margin-style {
    margin: 0.25rem;
}

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