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

Razor

<div id="overviewDemoDropZone" class="card custom-drop-zone jumbotron w-100 m-0">
    <svg version="1.1" id="_x31_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 42 42" style="enable-background:new 0 0 42 42;" xml:space="preserve">
        <style type="text/css">
            .st0{fill-rule:evenodd;clip-rule:evenodd;}
        </style>
        <g id="_x32_">
            <path id="_x33_" class="st0" d="M34,42H8c-2.2,0-4-1.8-4-4V4c0-2.2,1.8-4,4-4h19l11,11v27C38,40.2,36.2,42,34,42z M27,4v7h7L27,4z
            M34,14H24V4H8v34h26V14z" />
        </g>
        <g id="_x31_2"><path id="_x33__1_" class="st0" d="M28,26h-5v8h-2h-2v-8h-5l7-7L28,26z" /></g>
    </svg>
    <span>Drag and Drop File Here</span>
</div>

<DxUpload Name="myFile" UploadUrl="https://localhost:10000/api/Upload/Upload/" 
          ExternalDropZoneCssSelector="#overviewDemoDropZone"
          ExternalDropZoneDragOverCssClass="custom-drag-over border-light text-white">
</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;
}
.custom-drop-zone.custom-drag-over {
    background-color: #868A8D;
}

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