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

Question

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

sblb 896

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

Bruce (SqlWork.com) 31,496

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.

sblb 896 Reputation points

2021-10-28T12:56:16.023+00:00

Hi,
No the folder is not on the web server. The folder is on local disk.
If I do understand a virtual scrolling is only to improve a performance of component rendering.
With three choices that you proposed I would like to know if it's improve the acces/opening the files.
My needed is to see in user interface all elements of the directory and search the file and open it. The format can be pdf or image. In case it will be interested to use virtual scrolling. Do you have any suggestion to do that in blazor wasm?
AgaveJoe 20,151 Reputation points

2021-10-28T13:24:51.12+00:00

No the folder is not on the web server. The folder is on local disk.

Browsers cannot programmatically access the local file system. HTML has the file input element which opens an explorer window to let the user select files. The browser has no control over the window though.

What exactly is the goal? Upload files to a remote server while allowing the user to see an thumbnail of the selected files?
sblb 896 Reputation points

2021-10-28T14:35:21.253+00:00

The first objective is to speed up access and opening of files via a web interface.
I would like to make a kind of viewer for pdf and image files and also be able to open them.

I understand that the input element of the file opens an explorer window but accessing the file will always take too long.

I imagine creating a text or csv file with all the file paths and names. After that, put all the names accessible to the user via a list box with search names. By clicking for example on a file name I can have a visualization of the file and have the possibility to open it.
I don't really know which way to go;
Bruce (SqlWork.com) 31,496 Reputation points

2021-10-28T14:50:08.107+00:00

This can not be done with a web application. As stated web applications can not do a local directory request.

You will need to make a desktop application.
sblb 896 Reputation points

2021-10-28T15:24:23.143+00:00

Ok, it's clear to me.
I may make a desktop independent of my web application;
But before I go to this solution I could perhaps transfer on the server all the files and create a database to access them; What do you think?
AgaveJoe 20,151 Reputation points

2021-10-28T19:57:12.96+00:00

The concept is very simple. If the file are on a web server or stored in a database then code running on the web server can access the files. As the programmer, you get to design the interface however you like.

The problem remains, how do you plan to get application user files to the web server? Do you know every user that will use this web application?

I'm not sure a web application is going to work as expected given the information so far.
sblb 896 Reputation points

2021-10-29T13:24:14.827+00:00

Hi, I do understand that if the files are on a data storage server or in a database it can work.
In this case, I am thinking of doing the database store the links to the files to acces at the data storage server.
The user interface could be a datagrid and the access to the files via a controller.
Yes, I know all the users because the website is placed in an intranet.
Is this possible?
sblb 896 Reputation points

2021-10-31T09:28:37.527+00:00

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?

Answer 2

AgaveJoe 20,151

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.

sblb 896 Reputation points

2021-11-01T17:44:59.237+00:00

Hi, thank you for all the information you have given me.
If I understand correctly I need to create an access to the data server via a database.
The access to my data will be done by querying the database with a controller. The controller will also contain ControllerBase.File() which you have given as an example.

I also don't have all the information about the connection to the data server which is in production. I'll look into it to get the information.
So I will not work directly on this data server for the moment.

I found this MS tutorial very interesting here but it is for Azure SQL. Do you have any links to tutorials to set up the logic or an example?

Thanks in advance
AgaveJoe 20,151 Reputation points

2021-11-01T18:02:37.26+00:00

As I understand form your recent posts, the file paths are stored in a database and the files are stored on a file share which you call a "data server". If this is not correct, then please explain clearly as possible how the environment is configured.

I found this MS tutorial very interesting here but it is for Azure SQL. Do you have any links to tutorials to set up the logic or an example?

You still have no told what database or data access you are using. However, querying data is a very common task in .NET.

ADO.NET
Tutorial: Get started with EF Core in an ASP.NET MVC web app
sblb 896 Reputation points

2021-11-01T18:11:06.993+00:00

The files are well stored in the shared files. However, I have to create a database of the file paths.
I have to create the controller to access the shared files via the database.
On my application I display the whole database with the hypertext links to open the pdf or images
Zhi Lv - MSFT 21,721 Reputation points Microsoft Vendor

2021-11-02T07:08:19.247+00:00

Hi @sblb ,

Here are some relate articles about upload file and display them in asp.net core, you can refer them:

Upload files in ASP.NET Core

ASP.NET Core Blazor file uploads

Upload And Display Image In ASP.NET Core 3.1
sblb 896 Reputation points

2021-11-02T17:48:35.217+00:00

@ AgaveJoe, I will use SQL Server 2019.
I have to create the data base with the path of each files. After that, I think it will be possible to display all path with link to acces directly to the data. I hope this will speed up the access to the files and the opening.
Do you have any examples with this configuration?
AgaveJoe 20,151 Reputation points

2021-11-02T21:36:34.243+00:00

Do you have any examples with this configuration?

I already provided an example. I think you might misunderstand how web applications work. Browser security will not allow users to open files directly from a file share. Your users will download the files from the web server.
sblb 896 Reputation points

2021-11-03T06:16:00.38+00:00

OK. So after download the file from web server the users can open it!
can I use a virtalhost?

Answer 3

GT 0

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

Haitham Elhajj 0 Reputation points

2023-02-07T23:36:32.05+00:00

Great, can we add custom annotaions, save them then reload again.

does the pdfviewer allow single page display and navigate horizontally between pages?

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

3 answers

Activity