How to customize the progress bar in ASP.NET MVC File Upload

26 Aug 20261 minute to read

You can customize the progress bar’s size, color, and background by overriding the styles in the Uploader control. Refer to the following example.

CSHTML

<div class="custom_progress">
    @Html.EJS().Uploader("UploadFiles").AsyncSettings(new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = "https://services.syncfusion.com/aspnet/production/api/FileUploader/Save", RemoveUrl = "https://services.syncfusion.com/aspnet/production/api/FileUploader/Remove" }).Render()
</div>

Index.css

.custom_progress {
    max-width: 400px;
    margin: 0 auto;
}

.custom_progress .e-upload .e-upload-files .e-upload-file-list .e-file-container .e-progress-inner-wrap .e-upload-progress-bar.e-upload-progress {
    background: yellow;
    height: 4px;
}

.custom_progress .e-upload .e-upload-files .e-upload-file-list .e-file-container .e-progress-inner-wrap {
    height: 4px;
    background-color: lightblue;
}

Explore the ASP.NET MVC File Upload feature tour page to discover its groundbreaking features. You can also check out our ASP.NET MVC File Upload example to see how to browse and select files for upload to the server.