How to view and open pdf & images in blazor wasm?

Question

Hi,
I would like to make an application with blazor wasm that displays and opens pdf or image files (png...) found in the windows explorer. The problem is that under the windows explorer there are more than 100 000 files. The access to the directory is very long (indexing) and the opening of the files is also long. The size of the files is from 100ko to 2Mo.

I would like to know what would be the best strategy?
Do you have any examples of applications that do this type of work?

Thanks in advance

Answer 1

I assume the folder is on the web server. the server could cache a listing of the folder, and use a file watcher to add/ remove files from the cache. you will want to implement a virtual scrolling for the client display.

to display an png, you just render an <img> with the source set to the image url. for the pdf you have a couple choices

1) render an anchor with target="_blank" and the href the pdf url. then use javascript interop to click the anchor.

2) use the <embed>, <object> or <iframe>. common to use <object> and fallback to an <iframe>

3) use a javascript pdf viewer like pdf.js (code used by Firefox). again you can use javascript interop to load the image. I'd probably have pdf.js do the download rather than blazor, as you would get better performance. the viewer just uses a canvas which your blazor code could render.

Answer 2

Hi, I didn't find some examples to Create the database with link to files s to acces at the data storage server.
I ask me if it's possible?
Could you please give me some advise ansd examples?

The web server must have access to the data storage server. The rest is very simple. Create an action method that takes advantage of the standard Id route parameter. Use the Id to query the database to find the file path. Then return a file stream using the ControllerBase.File().

The following example shows how to return a file stream. You'll need to write the code to query the database we have no idea what data access you are using.

public IActionResult FileHandler(int id)
{
    //look up the Id 
    var path = Path.Combine(Environment.ContentRootPath, @$"wwwroot/Content/{id}");
    var fileStream = System.IO.File.OpenRead(path);
    return File(fileStream, "application/pdf");
}

The HTML anchor tags uses a standard route to fetch the file in your markup.

Answer 3

Hi, You can try our Syncfusion Blazor PDF Viewer, it Easily view, review, open, save and displays PDF files in blazor application. Our Syncfusion Blazor PDF Viewer getting started documentation is the best place to state. You can try our 30-day free trial to check out our Blazor PDF Viewer and other Blazor components. And all the Blazor components are available at free of cost. If you are eligible, you can claim free community license.

https://www.syncfusion.com/sales/communitylicense

Note: I work for Syncfusion