Show single uploaded filename beside RadzenUpload component

Ibrahim_Tamimi · March 22, 2023, 1:52am

I have looked into Radzen upload component tutorial. None of the examples provided show the uploaded file name beside the component. Is it possible to show the single uploaded file name on the grey area beside the "CHOOSE" button as shown in the image below?

Edited image of Radzen upload component:
tempsnip

Code example from the tutorial:

<div class="col-md-4 p-3">
	<RadzenCard>
		<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">Using RadzenProgressBar</RadzenText>
		<RadzenUpload Url="upload/single" Progress=@TrackProgress Complete=@CompleteUpload class="w-100" />
		<RadzenProgressBar Value=@progress class="mt-4" Visible=@showProgress />
		<RadzenButton Text="Cancel" Click=@(args => CancelUpload()) class="d-block mt-4" Visible=@showProgress />
		<RadzenLabel Visible=@showComplete class="mt-4" Text=@completionMessage />
	</RadzenCard>
</div>

enchev · March 22, 2023, 7:14am

Ibrahim_Tamimi · March 22, 2023, 8:23am

Yes I can access the file name but I want to show the file name of the uploaded file next to the button just like the Bootstrap file upload component below:

Bootstrap File upload:

Is it possible to show the file name of the upload file in the grey area of the RadzenUpload component next to its button just like the image below?
tempsnip

enchev · March 22, 2023, 8:25am

You can check the source code for reference what and where is shown:

github.com

radzenhq/radzen-blazor/blob/master/Radzen.Blazor/RadzenUpload.razor#L21-L40


      
          @if (files.Any())
          {
          <div class="rz-fileupload-content">
              <div class="rz-fileupload-files">
                  <div>
                      @foreach (var file in files)
                      {
                      <div class="rz-fileupload-row" style="margin-bottom: 10px">
                          <div><img src="@file.Url" width="50px" onerror="this.style.display='none';" alt="@ImageAlternateText"></div>
                          <div>@file.Name</div>
                          <div>@(file.Size / 1024) KB</div>
                          <div>
                              <button disabled="@Disabled" @onclick="@(args => OnRemove(file))" type="button" class="@ButtonClassList"><span class="rz-icon-trash" style="display:block"></span></button>
                          </div>
                      </div>
                      }
                  </div>
              </div>
          </div>
          }

Ibrahim_Tamimi · March 22, 2023, 9:57am

Thank you sir. I will use the example you mentioned to show the file name.