API to connect a FileTable in Blazor Wasm

sblb 1,171 Reputation points
2021-12-31T15:33:00.9+00:00

Hi,
I've created a Filetable via SqL server 2019 to have an architecture of the file (quantities 100 000 files).
I would now like to display my database file on a razor page to open the files directly from my interface. Is this possible? Do you have any tips and/or tutorials on how to interface with a database filetable?

Blazor
Blazor
A free and open-source web framework that enables developers to create web apps using C# and HTML being developed by Microsoft.
1,492 questions
C#
C#
An object-oriented and type-safe programming language that has its roots in the C family of languages and includes support for component-oriented programming.
10,605 questions
0 comments No comments
{count} votes

Accepted answer
  1. Zhi Lv - MSFT 32,076 Reputation points Microsoft Vendor
    2022-01-05T05:48:14.973+00:00

    Hi @sblb ,

    Whether you are using Entity Framework Core (EF core) or Entity Framework to map the database table and the entity classes in the application?

    Generally, in Asp.net core application, we will use the EF core to map the database table and the entity classes. And use the Dependency Injection to register the DbContext and the Repository.

    When we configure/register the DbContext, we can set the connection string via the DbContextOptionsBuilder, like this:

    public class BloggingContext : DbContext  
    {  
        public DbSet<Blog> Blogs { get; set; }  
        public DbSet<Post> Posts { get; set; }  
    
        protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)  
        {  
            optionsBuilder.UseSqlServer(  
                @"Server=(localdb)\mssqllocaldb;Database=Blogging;Trusted_Connection=True");  
        }  
    }  
    

    Or register it in the Startup.cs (asp.net core 1 ~ 5) or Program.cs file (asp.net 6), like this:

            services.AddDbContext<SchoolContext>(options =>  
                options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));  
    

    More detail information, refer to Tutorial: Get started with EF Core in an ASP.NET MVC web app (in WebAPI application, it will use the similar steps) and Configuration in ASP.NET Core (To get the connection string stored in the appsetting.json file).

    Finally, you can refer this article and sample to use EF core with FileTable, and build a API application to query data from FileTable.

    ASP.NET Core 5 MVC file upload / download with MS SQL Server FileTable


    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    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.

    Best regards,
    Dillion


12 additional answers

Sort by: Most helpful
  1. Bruce (SqlWork.com) 61,026 Reputation points
    2022-02-03T16:30:44.207+00:00

    step 3 is for a razor view site. basically rending a form with an <input type=file> html control to upload the file. Instead of a web page doing a form post to a server action that saves the file, you are writing a Blazor app, that uploads a file to a server.

    you need the blazor version of file upload that call your webapi that saves the file:

    https://learn.microsoft.com/en-us/aspnet/core/blazor/file-uploads?view=aspnetcore-6.0&pivots=webassembly

    note: the Blazor file upload support is limited to small files (< 500kb). If you need to upload large files, then you will need to use javascript interop and use fetch to upload the large file. This probably beyond your skills, so you should look at a 3rd party file upload control if large file support is required.

    0 comments No comments

  2. sblb 1,171 Reputation points
    2022-02-03T18:14:59.36+00:00

    I've already made the code of your link.
    with this code I can't rendered all file from file table and I can't open it directly in ui.

    My goal is to have all files in ui to open the file.
    as the picture : 171121-screenshot-20220203-190140.jpg

    I thought that using file table will only display the content in the web interface so considering that would be hypertext type link and when click on link well then the file opens by downloading it only the file
    I know I'm not an expert but I'm trying to move forward just for the sake of understanding the tool

    Have you some advise with :
    "javascript interop and use fetch to upload the large file."?

    0 comments No comments

  3. Bruce (SqlWork.com) 61,026 Reputation points
    2022-02-03T18:36:00.25+00:00

    you are asking too many questions in one thread.

    The original ask was accessing a sql file table from Blazor WASM. Blazor WASM can not access a sqlserver (or a file staten for that matter) directly. it must call a webserver (webapi if using .net core).

    so you were given sample code to access a sql filetable from webapi.

    then you asked about uploads.

    now you are asking about downloads

    a download is just render a link (<a>) with the href = to the web server api that returns a file, as in the exiles first given you.

    you should get your webapi working first. you can add swagger support or use postman. get the following actions working

    /api/listfiles - query filterable and return filename and other properties
    /api/uploadFile - upload a file with any metadata
    /api/downloadFile - download a file with disposition attachment.

    once these are working, you can write blazor code to call the webapi.

    component to list files with link
    component to upload a file

    if you get stuck at a step, create one thread asking help for what does not work.

    0 comments No comments

  4. sblb 1,171 Reputation points
    2022-02-07T15:32:38.377+00:00

    Thanks to your information.
    To avoid explaining my content, I prefer to give you the following information directly.
    I've made a API based on the follow link : src

    When I run I obtained the following page and It's seems ok.
    171963-capture.jpg

    Right now I have to connect the web/api with blazor wasm. do you have some advise?

    0 comments No comments