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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

File preview in uploader

Thread ID:

Created:

Updated:

Platform:

Replies:

148675 Oct 29,2019 11:53 PM UTC Nov 4,2019 04:39 AM UTC Blazor 3
loading
Tags: File Upload
Ivan Petrov
Asked On October 29, 2019 11:53 PM UTC

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 [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> 
                <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
Replied On November 1, 2019 11:20 AM UTC

Thank you very much!

Krasimir

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.



Regards,
Narayanasamy P.
 


CONFIRMATION

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