DxUpload.FileUploadStart Event

Fires when file upload is about to start.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v20.2.dll

Declaration

[Parameter]
public Action<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 gets their values in the server-side controller.

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

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

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:

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

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

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.

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

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