File preview in uploader

[Ivan Petrov]

Hello,

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,

Krasimir

[Narayanasamy Panneer Selvam]

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> 

                <UploaderTemplates> 

                    <Template> 

                        <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)"> 

                                </span> 

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

                            </li> 

                        </ul> 

                    </Template> 

                </UploaderTemplates> 

 

                <UploaderAsyncSettings SaveUrl="https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save" RemoveUrl="https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove"></UploaderAsyncSettings> 

            </EjsUploader> 

 

    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.

Regards,
Narayanasamy P. 

[Ivan Petrov]

Thank you very much!

Krasimir

[Narayanasamy Panneer Selvam]

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.


Regards,
Narayanasamy P. 

[Eli]

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]

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.  

 

Regards, 

Sureshkumar P