We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

File preview in uploader

Thread ID:





148675 Oct 29,2019 11:53 PM UTC Nov 23,2020 04:16 AM UTC Blazor 5
Tags: File Upload
Ivan Petrov
Asked On October 29, 2019 11:53 PM UTC


How can I preview the uploaded files in a way similar to your demo in asp.net core (https://ej2.syncfusion.com/aspnetcore/Uploader/ImagePreview#/material)?

Thank you in advance,

Narayanasamy Panneer Selvam [Syncfusion]
Replied On November 1, 2019 10:47 AM UTC

Hi Krasimir,

Greetings from Syncfusion support.

Yes, you can create image preview sample in Blazor too. You can achieve this requirement by using template Concept. Please find the code example in below,

<EjsUploader @ref="uploderObj" ID="UploadFiles" ModelType="@model"> 
                <UploaderEvents OnUploadStart="OnFileUploading" FileSelected="onFileSelected" OnRemove="OnFileRemove"></UploaderEvents> 
                        <ul class="e-upload-files"> 
                            <li class="e-upload-file-list" data-file-name="@((context as FileInfo).Name)" title="@((context as FileInfo).Status)"> 
                                <span class="wrapper"> 
                                    <img class="upload-image" alt="Image" 
                                         src="@((context as FileInfo).RawFile)"> 
                                <div class="name file-name" title="@((context as FileInfo).Name)">@((context as FileInfo).Name)</div> 
                                <div class="file-size">@((context as FileInfo).Size)</div> 
                                <span class="e-icons e-file-remove-btn" id="removeIcon" @onclick="@removeFile" title="Remove"></span> 
                                <span class="e-upload-icon e-icons e-file-remove-btn" @onclick="@uploadFile" title="Upload" id="iconUpload"></span> 
                <UploaderAsyncSettings SaveUrl="https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save" RemoveUrl="https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove"></UploaderAsyncSettings> 
    public void OnFileUploading(Syncfusion.EJ2.Blazor.Inputs.UploadingEventArgs args) 
          args.Cancel = true; 

In the attached sample we have prevented rendering of default file list in UI and have updated template using OnUploadStart event.

For your convenience we have prepared a demo sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ImagePreview-2056251890  
Kindly let us know if you need further assistance on this.

Narayanasamy P. 

Ivan Petrov
Replied On November 1, 2019 11:20 AM UTC

Thank you very much!


Narayanasamy Panneer Selvam [Syncfusion]
Replied On November 4, 2019 04:39 AM UTC

Hi Krasimir, 
Most welcome. 

We are glad to know that the provided sample was helpful for your requirement. Feel free to contact us, if you need further assistance on this.

Narayanasamy P.

Replied On November 20, 2020 03:28 AM UTC

Can you please provide an example of this in the official documentation so it's easier to find? I feel like this is much too vital a feature to go undocumented.

Sureshkumar P [Syncfusion]
Replied On November 23, 2020 04:16 AM UTC

Hi Eli,  
Thanks for your valuable suggestion. We will consider and include this in our documentation We request you visit our website periodically for documentation updates.  
Sureshkumar P 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon