Customizing Angular File Uploader Status Messages

When implementing a Angular file uploader, it’s often necessary to provide users with clear and informative status messages. This article will guide you through the process of customizing status messages for the file upload process using the Syncfusion Angular Uploader component.

Customizing Status Messages

The Syncfusion Angular Uploader component provides events that can be used to customize the status messages for different stages of the file upload process. These events include selected, success, and failure, each with a statusText property that can be modified.

HTML Setup

First, set up the Uploader component in your HTML file with the necessary event bindings:

<div id="uploadfile">
  <ejs-uploader
    id="Sample-Uploader"
    #defaultupload
    [autoUpload]="false"
    dropArea="#uploadfile"
    (selected)="OnFileSelected($event)"
    (success)="OnSuccess($event)"
    (failure)="onFailure($event)"
    [asyncSettings]="path"
  >
  </ejs-uploader>
</div>

TypeScript Implementation

In your TypeScript file, define the methods that correspond to the events and customize the status messages:

Customizing the File Selected Text

The OnFileSelected(args: any) method is triggered when a file is selected. You can personalize the status message for each file, indicating it is ready to upload.

public OnFileSelected(args: any): void {
  for (let i = 0; i < args.filesData.length; i++) {
    args.filesData[i].status = args.filesData[i].name + ' is ready to upload';
  }
}

Customizing the Success Message

The OnSuccess(args: any) method is triggered upon successful upload. You can personalize the success message to inform the user of the successful upload.

public OnSuccess(args: any): void {
  args.statusText = args.file.name + ' uploaded successfully';
}

Customizing the Failure Message

The onFailure(args: any) method is triggered when a file fails to upload. You can personalize the failure message to inform the user of the unsuccessful attempt.

public onFailure(args: any): void {
  args.statusText = args.file.name + ' failed to upload';
}

By following the steps outlined above, you can effectively customize the status messages for the Syncfusion Angular Uploader component, enhancing the user experience by providing clear and personalized feedback during the file upload process.

Sample

For a complete working example, you can refer to the following sample: