DxUpload.UploadUrl Property

Specifies a target URL for the upload request.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.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 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. Refer to the following topic for more information: Attribute routing for REST APIs.

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 implements 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();
    }
}

To maintain the highest possible security posture, we do not include the full implementation of the Upload controller. To incorporate secure file upload operations in your web app, we recommend that you add different validation types to upload controller code as described in the following help section: Validation. For information on controller implementation code for different file upload scenarios, refer to the following Microsoft article: File Upload Scenarios.

Run Demo: Upload - Overview