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
close icon

File preview in uploader


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,

5 Replies

NP Narayanasamy Panneer Selvam Syncfusion Team 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. 

KI Krasimir Ivanov November 1, 2019 11:20 AM UTC

Thank you very much!


NP Narayanasamy Panneer Selvam Syncfusion Team 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.

EL Eli 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.

SP Sureshkumar P Syncfusion Team 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 

Live Chat Icon For mobile
Up arrow icon