How to load images/videos directly from server in Blazor WebAssembly?

Question

I implemented a solution in Blazor webassembly that allows the user to upload an image and store the file on the server and the filepath in the database. When I load the image on client I send the image from the sever to client as bytes and transform the image bytes in a base64 string and display the image. This works well but from what I read, this is not a good practice because the base64 tranformation is increasing the file size by 30% and the images cannot be cached on client. I would want to let the browser download the file from the server path and display the image. My questions are the following:

How do I set the server 'root' location in order for the browser to know where to get the files ? I'm using IWebHostEnvironment on the server to get the local path.
Is there any way to secure the files to allow only the authorised user to download the files from the server ?
Should I add the images in the same folder as the solution or I should make a different folder outside of the solution ?
I'm currently using IIS Server with ASP.NET CORE 5 in a Blazor WebAssembly solution.

Answer 1

as the permission is tied to the value of a passed parameter, it would be difficult to do a generic solution.

Answer 2

You action could return the image as file, then you Blazor code sets an image src the webapi action urls.

If you want to use the static file handler, be sure to configure security before the static handler. Put the images in a folder under wwwroot.

The index page should have set the base ref, so you just use /folder/imagepath

Answer 3

Is there any way to secure the files to allow only the authorised user to download the files from the server ?

Hi @Daniel Avadanei , to achieve your requirement of protecting/securing static files, as @Bruce (SqlWork.com) mentioned, you can try to create a controller action method with the [Authorize] attribute to serve those static files by return a FileResult object, like below.

[HttpGet("/FetchImageAndVideo/{type}/{filename}")]  
[Authorize]  
public IActionResult FetchImageAndVideo(string filename, int type)  
{  
    //...  
    //code logic here  
    //...  
  
    var contentType = type == 1 ? "image/jpeg" : "video/mp4";  
  
    var filePath = Path.Combine(_env.ContentRootPath, "MyImagesAndVideos", $"{filename}");  
  
    if (!System.IO.File.Exists(filePath))  
    {  
        contentType = "image/jpeg";  
        filePath = "default_notfound_image_path_here";  
    }  
  
    return PhysicalFile(filePath, contentType);  
}  

Accessing a specific file from frontend code, like below.

src="https://xxxxx/FetchImageAndVideo/2/mytestvideo.mp4"  

---

If the answer is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

With Regards,
Fei Han