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

Preview image in Uploader not return RawFile

Thread ID:

Created:

Updated:

Platform:

Replies:

149964 Dec 16,2019 12:54 PM UTC Sep 18,2020 12:34 PM UTC Blazor 20
loading
Tags: File Upload
Piet Cris
Asked On December 16, 2019 12:54 PM UTC

Preview image in Uploader not return RawFile. Return only name, size ..

                <EjsUploader ID="UploadFiles" AutoUpload=false DirectoryUpload=false ModelType="@model">
                    <UploaderAsyncSettings SaveUrl="api/SampleData/Save" RemoveUrl="api/SampleData/Remove" ChunkSize="500000"></UploaderAsyncSettings>
                    <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" src="@((context as FileInfo).RawFile)" alt="Image" />
                                    </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>
                                </li>
                            </ul>
                        </Template>
                    </UploaderTemplates>

                </EjsUploader>


@code {
    private EjsUploader uploderObj;
    public FileInfo model = new FileInfo();
...

Saranya Dhayalan [Syncfusion]
Replied On December 17, 2019 06:25 AM UTC

Hi Piet, 
 
Thank you for contacting Syncfusion support, 
 
We have created the image preview sample in Blazor. Please remove the Chunksize property in UploaderAsyncSettings. In below sample we have prevented rendering of default file list in UI and have updated template using OnUploadStart event. 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 asFileInfo).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;  
    }  
 
 
Please find the below sample link: 
 
 
Regards, 
Saranya D 


Piet Cris
Replied On December 17, 2019 09:14 AM UTC

Sample link: https://www.syncfusion.com/downloads/support/directtrac/256039/ze/ImagePreview1478731155  --- please public access


Message :                                                                              Access Denied
You don’t have permission to access this file. The reason may be:
  • The incident associated with this file is not tied to the account you used to log in. To Logout use this .
  • Your enterprise portal admin has not allowed you to access other portal users’ incidents. Ask admin to change the support visibility in their Syncfusion profile.
If you feel this information is wrong and you need to download this file, please contact us.


Piet Cris
Replied On December 17, 2019 09:30 AM UTC


I respected this model and it worked. Thank you very much

Saranya Dhayalan [Syncfusion]
Replied On December 17, 2019 10:25 AM UTC

Hi Piet 
 
Most Welcome.  
 
Please let us know, if you need any further assistance on this.  
 
Regards, 
Saranya D 


Roberto Conti
Replied On December 17, 2019 10:17 PM UTC

Hi,
could you release a public accessible sample, please?

Thanks

Saranya Dhayalan [Syncfusion]
Replied On December 18, 2019 07:22 AM UTC

Hi Piet, 
 
Sorry for the inconvenience caused, 
 
Please find the below sample link: 
 
 
Could you please check the above sample link and get back to us, if you need any further assistance on this? 
 
Regards, 
Saranya D 


Piet Cris
Replied On December 18, 2019 08:59 AM UTC

after update error ModelType
               <EjsUploader @ref="uploderObj" ID="UploadFiles"  ModelType="model">

@code
{ public FileInfo model = new FileInfo(); 


Error CS1503 Argument 1: cannot convert from 'Syncfusion.EJ2.Blazor.Inputs.FileInfo' to 'System.Type'


Saranya Dhayalan [Syncfusion]
Replied On December 18, 2019 09:42 AM UTC

Hi Piet, 
 
We have checked your reported issue, ModelType’s type has been changed from object to Type for better user experience in tag generation for non-generic type component templates. Please find the below code snippet: 
 
<EjsUploader @ref="uploderObj" ID="UploadFiles" ModelType="typeof(FileInfo)"> 
 
For your convenience, we have prepared a sample. Please find the sample link: 
 
 
 
Please find the release notes for the ModelType 
 
 
Could you please check the above sample link and get back to us, if you need any further assistance on this? 
 
Regards, 
Saranya D 


Blazor
Replied On July 27, 2020 12:06 AM UTC

Hi Saranya,

It's  not workin in new versions.

Can you please update this solution ?

Sureshkumar P [Syncfusion]
Replied On July 27, 2020 07:14 AM UTC

Hi All,  
 
We have validated the reported requirement. We have prepared and added the custom sample, below. We get the path from the change event and the source(img) element value has changed dynamically, based on the path. Refer to the code below,  


 
<div class="col-lg-12 control-section">  
    <div class="control_wrapper">  
        <div id="dropArea" style="heightautooverflowauto">  
            <SfUploader @ref="uploderObj" ID="UploadFiles" AllowedExtensions=".png,.jpeg,jpg">  
                <UploaderEvents  ValueChange="onChange" OnRemove="onRemove"></UploaderEvents>  
                <UploaderTemplates>  
                    <Template>  
                        <span class="wrapper">  
                            <img class="upload-image" alt="Image"  
                                 src="@(files.Count >0 ? files.Where(item=>item.Name == context.Name)?.FirstOrDefault()?.Path : string.Empty)">  
                        </span>  
                        <div class="name file-name" title="@(context.Name)">@(context.Name)</div>  
                        <div class="file-size">@(context.Size)</div>  
                        <span class="e-icons e-file-remove-btn remove" id="removeIcon" title="Remove"></span>  
                        <span class="e-upload-icon e-icons e-file-remove-btn" title="Upload" id="iconUpload"></span>  
                    </Template>  
                </UploaderTemplates>  
  
            </SfUploader>  
  
        </div>  
    </div>  
</div>  
<style>  
    .control_wrapper {  
        width350px;  
        margin0 auto;  
    }  
</style>  
  
  
<style>  
    .control_wrapper {  
        width350px;  
        margin0 auto;  
    }  
</style>  
  
  
@code {  
    private SfUploader uploderObj;  
    private object selectedFile { getset; }  
    List<fileInfo> files = new List<fileInfo>();  
  
  
  
    public class fileInfo  
    {  
        public string Path { getset; }  
        public string Name { getset; }  
        public double Size { getset; }  
    }  
  
    public void onChange(UploadChangeEventArgs args)  
    {  
        files = new List<fileInfo>();  
        foreach (var file in args.Files)  
        {  
  
            var path = Path.GetFullPath("wwwroot\\Images\\") + file.FileInfo.Name;  
            FileStream filestream = new FileStream(path, FileMode.Create, FileAccess.Write);  
            file.Stream.WriteTo(filestream);  
            filestream.Close();  
            file.Stream.Close();  
  
            files.Add(new fileInfo() { Path = "/Images/" + file.FileInfo.Name , Name = file.FileInfo.Name, Size = file.FileInfo.Size });  
        }  
    }  
    public void onRemove(RemovingEventArgs args)  
    {  
        foreach (var removeFile in args.FilesData)  
        {  
            if (File.Exists(Path.Combine(@"wwwroot\Images", removeFile.Name)))  
            {  
                File.Delete(Path.Combine(@"wwwroot\Images\", removeFile.Name));  
             }  
        }  
    }  
  
    public void uploadFile(MouseEventArgs args)  
    {  
        this.uploderObj.Upload(selectedFile);  
    }  
}  
 
Also, removed the corresponding file when delete the file using the remove event.   
 
Addition to that create the Images folder inside the wwwroot folder in the application. Folder name can be customized as per you own, if you changed the folder name then, change the folder name in above highlighted line also.  


 


 
Regards,  
Sureshkumar P 


Blazor
Replied On August 6, 2020 07:50 PM UTC

Thanks Sureshkumar ,
Its perfectly working.

Sureshkumar P [Syncfusion]
Replied On August 7, 2020 04:37 AM UTC

Hi All, 
 
Thanks for your update. Please get back to us if you need any update on this. 
 
Regards, 
Sureshkumar P 


vijaymohan
Replied On August 26, 2020 05:05 PM UTC

Can you please provide sample for Blazor Core Hosted Project Template 

Regards
Vijay

Prince Oliver [Syncfusion]
Replied On September 2, 2020 02:43 PM UTC

Hi Vijay, 

Thank you for contacting us. Please find the sample in  Blazor WASM Core Hosted project in the following link: 

Regards, 
Prince 


vijaymohan
Replied On September 4, 2020 04:10 PM UTC

Dear Prince,

Sorry.Its not working as expected. Given solution is WASM only. i expect with Save/Remove api controller. 

Regards
Vijay

Sureshkumar P [Syncfusion]
Replied On September 11, 2020 03:20 AM UTC

Hi Vijay, 
 
We try to prepare the sample based on your required scenario. We will validate and update the further details on two business days September 15th,2020. We appreciate your patience until then.  
 
Regards, 
Sureshkumar P 


vijaymohan
Replied On September 16, 2020 03:58 AM UTC

Hi Vijay, 
 
We try to prepare the sample based on your required scenario. We will validate and update the further details on two business days September 15th,2020. We appreciate your patience until then.  
 
Regards, 
Sureshkumar P 


Hi Sureshkumar P

Awaiting for your sample solution.

Regards
Vijay

Jeyanth Muthu Pratheeban Sankara Subramanian [Syncfusion]
Replied On September 16, 2020 04:44 PM UTC

Hi Vijay,

Thanks for your patience, 

We have achieved the reported requirement by using the controller with the help of HttpClient. Please find the sample below.


Sample Link       : https://www.syncfusion.com/downloads/support/forum/149964/ze/CoreHostedFileUpload1160193920 


Regards, 
Jeyanth. 


Davy
Replied On September 17, 2020 01:52 PM UTC

Thanks for the sample Jeyanth.

How would this sample work if you want to bind data from the database and prefill thumbnail images in the uploader control?

Sureshkumar P [Syncfusion]
Replied On September 18, 2020 12:34 PM UTC

Hi Piet, 
 
Thanks for your update. 
 
Based on your requirement, we have modified the sample. please refer the sample in the below link. 
 
 
Regards, 
Sureshkumar 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