DxUpload.FileUploadStart Event

Fires when file upload is about to start.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public EventCallback<FileUploadStartEventArgs> FileUploadStart { get; set; }

Event Data

The FileUploadStart event's data class is FileUploadStartEventArgs. The following properties provide information specific to this event:

Property	Description
Cancel	Specifies whether the file upload operation should be canceled.
FileInfo	Returns information about a file. Inherited from FileUploadEventArgs.
RequestData	Specifies the upload request’s custom data.
RequestHeaders	Specifies the upload request’s headers.
UploadUrl	Specifies a target URL for the upload request.

Remarks

In Instant upload mode, the FileUploadStart event occurs when a user selects a file in the Open File dialog or drops a file onto the drop zone. In OnButtonClick upload mode, this event fires when a user clicks the upload button.

Handle the FileUploadStart event to check file upload before it starts. For instance, you can add authentication information to the AJAX request, cancel upload based on a condition, or change the upload URL. Use the event argument’s FileInfo property to get information about the file (its name, type, size, and so on).

If the file upload operation is not cancelled, the FileUploadStarted event occurs after the FileUploadStart event.

Add Request Headers and Data

Use the event argument’s RequestHeaders and RequestData properties to specify headers and custom data for the upload request. The following snippet adds an authentication token and username to the request and uses their values in the server-side controller.

Razor

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

@code {
    void OnFileUploadStart(FileUploadStartEventArgs e) {
        e.RequestHeaders.Add("Authorization", $"Bearer {MySecretToken}");
        e.RequestData.Add("Username", "MyUsername");
    }
}

UploadController

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Authorization;

[Route("api/[controller]")]
public class UploadController : ControllerBase {
    private readonly IWebHostEnvironment _hostingEnvironment;

    public UploadController(IWebHostEnvironment hostingEnvironment) {
        _hostingEnvironment = hostingEnvironment;
    }

    [HttpPost]
    [Authorize]
    [Route("UploadFile")]
    public ActionResult UploadFile(IFormFile myFile) {
        string username = Request.Form["Username"];
        // Implement additional validation here.
        // ...
    }
}

Program.cs

// ...
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Authentication.JwtBearer;
//...
builder.Services.AddAuthentication(options => {
    options.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
});
//...
app.UseRouting();
app.UseAuthentication();
app.UseAuthorization();
//...

Cancel File Upload

Set the event argument’s Cancel property to true to cancel file upload. The following snippet prohibits the upload of files that exceed 1MB:

Razor

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

@code {
    void OnFileUploadStart(FileUploadStartEventArgs e) {
        if (e.FileInfo.Size > 1048576)
            e.Cancel = true;
    }
}

UploadController

using System.IO;
using System.Linq;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;

[Route("api/[controller]")]
public class UploadController : ControllerBase {
    private readonly IWebHostEnvironment _hostingEnvironment;

    public UploadController(IWebHostEnvironment hostingEnvironment) {
        _hostingEnvironment = hostingEnvironment;
    }

    [HttpPost]
    [Route("UploadFile")]
    public ActionResult UploadFile(IFormFile myFile) {
        try {
            var path = Path.Combine(_hostingEnvironment.WebRootPath, "uploads");
            if (!Directory.Exists(path))
                Directory.CreateDirectory(path);
            using (var fileStream = System.IO.File.Create(Path.Combine(path, myFile.FileName))) {
                myFile.CopyTo(fileStream);
            }
        } catch {
            Response.StatusCode = 400;
        }

        return new EmptyResult();
    }
}

Change an Upload URL

The Upload component’s UploadUrl property specifies a path of a server-side controller’s action that processes all upload requests. Use the event argument’s UploadUrl property to change the controller action based on conditions. The snippet below changes the upload URL for PNG files.

Razor

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

@code {
    void OnFileUploadStart(FileUploadStartEventArgs e) {
        if (e.FileInfo.Type == "image/png")
            e.UploadUrl = "https://localhost:10000/api/Upload/UploadPng/";
    }
}

UploadController

using System.IO;
using System.Linq;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;

[Route("api/[controller]")]
public class UploadController : ControllerBase {
    private readonly IWebHostEnvironment _hostingEnvironment;

    public UploadController(IWebHostEnvironment hostingEnvironment) {
        _hostingEnvironment = hostingEnvironment;
    }

    [HttpPost]
    [Route("UploadFile")]
    public ActionResult UploadFile(IFormFile myFile) {
        // ...
    }

    [HttpPost]
    [Route("UploadPng")]
    public ActionResult UploadPng(IFormFile myFile) {
        try {
            var path = Path.Combine(_hostingEnvironment.WebRootPath, "images");
            if (!Directory.Exists(path))
                Directory.CreateDirectory(path);
            using (var fileStream = System.IO.File.Create(Path.Combine(path, myFile.FileName))) {
                myFile.CopyTo(fileStream);
            }
        } catch {
            Response.StatusCode = 400;
        }
        return new EmptyResult();
    }
}