Skip to main content
A newer version of this page is available. .

DxUpload.UploadUrl Property

Specifies a target URL for the upload request.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v22.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public string UploadUrl { get; set; }

Property Value

Type Description
String

A string value that specifies a target URL.

Remarks

Set the UploadUrl property to a path of a server-side controller’s action that processes upload requests. You should also specify the Name property to associate the Upload component with the server.

<DxUpload Name="myFile" 
          UploadUrl="https://localhost:10000/api/Upload/Upload/">
</DxUpload>

Create a controller action that accepts the uploaded file, checks it, and saves it to the target location on a server. Follow the steps below to do this:

  1. Add the Controllers folder to your project.
  2. Right-click on the Controllers folder and select Add Controller.
  3. In the invoked window, select MVC Controller - Empty and click Add.
  4. Rename the controller (for example, UploadController) and click Add.

Do one of the following to access the uploaded file:

  • Create an action with a parameter whose name matches the Name property value.

    public ActionResult Upload(IFormFile myFile) {
        // ...
    }
    
  • Use the Name property value to get the uploaded file from form variables.

    public ActionResult Upload() {
        // ...
        var myFile = Request.Form.Files["myFile"];
        // ...
    }
    

The following example demonstrates how to implement the upload controller:

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

See Also