1. Home
  2. Forum
  3. Blazor
  4. How to display image from Blazor.Server layer to Blazor.Client Project ?

How to display image from Blazor.Server layer to Blazor.Client Project ?

Hi Team,

I was creating one POC, My requirement is to store ImageName and ImageURL in database. Image should be stored in Blazor.Client WWWroot folder. I m doing this POC on Blazor web assembley.

I was taking reference of this document

https://blazor.syncfusion.com/documentation/file-upload/getting-started/

This demo is working fine, But it is storing image in Blazor.Server  of Upload folder. But I need to display that image in Razor page which is there in Blazor.Client Project . 

Could you please give me demo code snippet for Getting image URL and storing in Blazor.Client WWWroot folder ?

6 Replies 1 reply marked as answer
BC Berly Christopher Syncfusion Team May 3, 2021 03:55 PM UTC

Hi Chandradev, 
  
Greetings from Syncfusion support. 
  
We have checked the reported issue. The client-hosted application returns the server path as a project root directory. Due to this, we could not save the file into the wwwroot folder under the client project repository. So, we will check and update the further details in two business days (5th May 2021). 
  
Regards, 
Berly B.C 


BC Berly Christopher Syncfusion Team May 5, 2021 11:34 AM UTC

Hi Chandradev, 
  
In the WASM core-hosted application, ContentRootPath will return the server path since we have used app.UseStaticFiles()  in the server Startup.cs file. Please find the more information from the below MSDN link. 
  
  
Also, in the latest version of .NET core, the webrootpath returns null. Please find the details from the below GitHub link. 
  
So, we can store the selected file in the wwwroot folder under the client repository, we can manually modify the storing path as mentioned below. 
  
  [HttpPost("[action]")] 
        public void Save(IList<IFormFile> UploadFiles) 
        { 
            long size = 0; 
            try 
            { 
                foreach (var file in UploadFiles) 
                { 
                    var filename = ContentDispositionHeaderValue 
                            .Parse(file.ContentDisposition) 
                            .FileName 
                            .Trim('"'); 
                    filename = hostingEnv.ContentRootPath.Replace("\\Server", "\\Client\\") + "wwwroot" + $@"\{filename}"; 
                    size += (int)file.Length; 
                    if (!System.IO.File.Exists(filename)) 
                    { 
                        using (FileStream fs = System.IO.File.Create(filename)) 
                        { 
                            file.CopyTo(fs); 
                            fs.Flush(); 
                        } 
                    } 
                } 
            } 
            catch (Exception e) 
            { 
                Response.Clear(); 
                Response.StatusCode = 204; 
                Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = "File failed to upload"; 
                Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = e.Message; 
            } 
        } 
 
  
  
Regards, 
Berly B.C 


Marked as answer
BD Boot Dat replied to Berly Christopher December 7, 2022 06:52 AM UTC

Hi Christopher, 

I'm using the api to save images in the server project. 

what would be the best way to get the images file data and URL for a variable so I can save the imageURL in sqlserver database to be able to view them after the data has been saved?

and how would I be able to view the images from the server side? will I have to use an API ?


UD UdhayaKumar Duraisamy Syncfusion Team December 9, 2022 01:15 PM UTC

You can get the uploaded file data and destination path URL on the server side in the save method.


 [HttpPost("[action]")] 

        public void Save(IList<IFormFile> UploadFiles) // You can get the file data in UploadFiles

        { 

            long size = 0; 

            try 

            { 

                foreach (var file in UploadFiles) 

                { 

                    var filename = ContentDispositionHeaderValue 

                            .Parse(file.ContentDisposition) 

                            .FileName 

                            .Trim('"'); 

                    filename = hostingEnv.ContentRootPath.Replace("\\Server", "\\Client\\") + "wwwroot" + $@"\{filename}";    // destination file path url

                    size += (int)file.Length; 

                    if (!System.IO.File.Exists(filename)) 

                    { 

                        using (FileStream fs = System.IO.File.Create(filename)) 

                        { 

                            file.CopyTo(fs); 

                            fs.Flush(); 

                        } 

                    } 

                } 

            } 


You can show the preview of the image using SfUploader with the help of Templates. Please refer to the below shared Syncfusion forum for more information.


https://www.syncfusion.com/forums/158433/file-upload-sample-with-custom-template-for-image-preview-async-auto-upload


BD Boot Dat December 23, 2022 02:14 PM UTC

What i mean is, after ive saved the image in the server path, id like to pass the names of the images uploaded to properties of an object.  I'll be saving this names in the database

so in the client side when i get the image names i will be able to display the image using <img src"serverpath/imagename"/>

so how can i display the images saved in the server folder on the client side ?


UD UdhayaKumar Duraisamy Syncfusion Team December 27, 2022 01:38 PM UTC

You can refer to the below shared Syncfusion forum for your requirement.

https://www.syncfusion.com/forums/163494/how-to-pass-custom-data-to-the-client-on-blazor-file-upload


Loader.
Up arrow icon