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

Preview image in Uploader not return RawFile

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();
...

20 Replies

SD Saranya Dhayalan Syncfusion Team December 16, 2019 10:25 PM

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 



PC Piet Cris December 17, 2019 01:14 AM

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.



PC Piet Cris December 17, 2019 01:30 AM


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


SD Saranya Dhayalan Syncfusion Team December 17, 2019 02:25 AM

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



RC Roberto Conti December 17, 2019 02:17 PM

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

Thanks


SD Saranya Dhayalan Syncfusion Team December 17, 2019 11:22 PM

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 



PC Piet Cris December 18, 2019 12:59 AM

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'



SD Saranya Dhayalan Syncfusion Team December 18, 2019 01:42 AM

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 



BL Blazor July 26, 2020 04:06 PM

Hi Saranya,

It's  not workin in new versions.

Can you please update this solution ?


SP Sureshkumar P Syncfusion Team July 26, 2020 11:14 PM

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 



BL Blazor August 6, 2020 11:50 AM

Thanks Sureshkumar ,
Its perfectly working.


SP Sureshkumar P Syncfusion Team August 6, 2020 08:37 PM

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



VI vijaymohan August 26, 2020 09:05 AM

Can you please provide sample for Blazor Core Hosted Project Template 

Regards
Vijay


PO Prince Oliver Syncfusion Team September 2, 2020 06:43 AM

Hi Vijay, 

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

Regards, 
Prince 



VI vijaymohan September 4, 2020 08:10 AM

Dear Prince,

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

Regards
Vijay


SP Sureshkumar P Syncfusion Team September 10, 2020 07:20 PM

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 



VI vijaymohan replied to Sureshkumar P September 15, 2020 07:58 PM

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


JM Jeyanth Muthu Pratheeban Sankara Subramanian Syncfusion Team September 16, 2020 08:44 AM

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. 



DA Davy September 17, 2020 05:52 AM

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?


SP Sureshkumar P Syncfusion Team September 18, 2020 04:34 AM

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 


Loader.
Live Chat Icon For mobile
Up arrow icon