Showing uploaded file thumbnail in Blazor

Amjad Khan 21 Reputation points
2022-04-20T11:12:12.917+00:00

I want to have a Blazor text box to get notes from the user. In the same box, I want the ability to upload files. When files are uploaded, file thumbnail and name should appear at the bottom of the box. How to achieve this in Blazor server app?

Blazor
Blazor
A free and open-source web framework that enables developers to create web apps using C# and HTML being developed by Microsoft.
1,492 questions
{count} votes

Accepted answer
  1. Zhi Lv - MSFT 32,076 Reputation points Microsoft Vendor
    2022-04-21T05:49:26.437+00:00

    Hi @Amjad Khan ,

    Since you don't share any code, it is hard to based on your code to give some suggestion. I just according to your description to create a simple sample, you can refer to it.

    1. Showing notes/text in the top.
    2. Below the text, I will have the img tags that will show the thumbnails.

    To create the thumbnail image and display it on the page, you can call the BrowserFileExtensions.RequestImageFileAsync convenience method to resize the image and generate a thumbnail image, then convert it to a base64 string, and use it to display the thumbnail image in the component.

    If for example the uploaded file is of various types such as png, jpg or other graphics formats do I need to worry about that or the browser will take care of that? And in case of non-image files like PDF or Word, I will only show the file name? Is that the standard way of showing file placeholders?

    For the upload file, you could use the <input> accept attribute to specify what file types the user can pick from the file input dialog box.

    And in the <InputFile>'s change event, you can also check the upload file's extension, and based on the result to generate the thumbnail image. Then, display the thumbnail image for the image files, and hide the image tag for the non-image files.

    Code like this:

    194934-image.png

    You can view the source code from here: 194925-fileupload.txt

    Then, the result as below:

    194965-1.gif


    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    Best regards,
    Dillion

    1 person found this answer helpful.

3 additional answers

Sort by: Most helpful
  1. Amjad Khan 21 Reputation points
    2022-04-20T12:33:10.543+00:00

    Yes, I can upload files. No issues there.


  2. Bruce (SqlWork.com) 60,866 Reputation points
    2022-04-20T18:07:39.8+00:00

    Once the file is upload you display an thumbnail with an <img> tag. You could set the width and height and let the browser create the thumbnail, but a better option is to create the thumbnail on the to lighten the download.

    To display the image, you either will use the static file handler or webapi controller action action. Another option is the blazor app could process the image, create a thumbnail and include on the image as a dataurl.


  3. AlexChow 11 Reputation points MVP
    2022-12-07T21:35:13.073+00:00

    The official Microsoft tutorial already has the best practice for uploading files and displaying thumbnails

    0 comments No comments