DxUpload.UploadUrl Property

Specifies a target URL for the upload request.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.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 implement a controller action:

1. Add the Controllers folder to your project.
2. Right-click on the Controllers folder and select Add | Controller.
3. In the Add New Scaffolded Item wizard, select MVC Controller - Empty and click Add.
4. On the next page, select API Controller - Empty, rename the controller (for example, UploadController), and click Add.
5. Make sure that your Program.cs file contains the MapControllers method call.

Use one of the following variants 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