Blazor upload

Radzen Studio Blazor Server
1

Hi, I must be missing something really obvious but I cannot for the life of me get the upload to work. Is there a step by step for dummies?

2

Simon, I haven't played with it yet, but do recall that there is a sample Radzen Blazor upload app on Github - https://github.com/akorchev/radzen/commit/f6ae19122fd191a313ee5bfde269794fd895fe73

Maybe if you dissect it, you'll figure out what you're doing wrong?
Stephen

3

Thanks. I am looking at Radzen as a low code solution. There must be an easier way through the Radzen app???

4

Everything needed can be found here:

5

I was hoping that there would be a guide on the radzen tool rather than coding manually. Is there such a thing?
Also, using the code provided seems to recognise the files selected but where have they been uploaded to?

6

Radzen generates an UploadController in blazor applications. It is empty by default so the developer decides where to save the files.

7

Which can be set in the UI? Is this relative to www root??
image

8

So, I think that I have been chasing my tail. I see there is an error in the log:
dotnet: info: Microsoft.AspNetCore.Hosting.Diagnostics[1]
Request starting HTTP/1.1 POST http://localhost:5000/upload multipart/form-data; boundary=----WebKitFormBoundaryCEBlEv3pVwAcHjdw 28665

dotnet: info
dotnet: : Microsoft.AspNetCore.Routing.EndpointMiddleware[0]
Executing endpoint '/_Host'

dotnet: info: Microsoft.AspNetCore.Mvc.RazorPages.Infrastructure.PageActionInvoker[3]
Route matched with {page = "/_Host", action = "", controller = ""}. Executing page /_Host

dotnet: info: Microsoft.AspNetCore.Mvc.ViewFeatures.Filters.AutoValidateAntiforgeryTokenAuthorizationFilter[1]
Antiforgery token validation failed. The required antiforgery cookie ".AspNetCore.Antiforgery.ZUt_ZvHVAMY" is not present.
Microsoft.AspNetCore.Antiforgery.AntiforgeryValidationException: The required antiforgery cookie ".AspNetCore.Antiforgery.ZUt_ZvHVAMY" is not present.
at Microsoft.AspNetCore.Antiforgery.DefaultAntiforgery.ValidateRequestAsync(HttpContext httpContext)
at Microsoft.AspNetCore.Mvc.ViewFeatures.Filters.ValidateAntiforgeryTokenAuthorizationFilter.OnAuthorizationAsync(AuthorizationFilterContext context)
info: Microsoft.AspNetCore.Mvc.RazorPages.Infrastructure.PageActionInvoker[3]
Authorization failed for the request at filter 'Microsoft.AspNetCore.Mvc.ViewFeatures.Filters.AutoValidateAntiforgeryTokenAuthorizationFilter'.
info: Microsoft.AspNetCore.Mvc.StatusCodeResult[1]
Executing HttpStatusCodeResult, setting HTTP status code 400
info: Microsoft.AspNetCore.Mvc.RazorPages.Infrastructure.PageActionInvoker[4]
Executed page /_Host in 41.5744ms

Any ideas on how to fix this please?

9

Try setting the Url of your upload to upload/single. This should hit the Single method of the upload controller.

10

Thanks, that explained the Url parameter for me, I thought that it had something to do with the destination path rather than the Url for the controller. I realise that there is actually no code in the controller to do anything other than return statuscode 200. Is there a working example of the code to show what the controller should look like with actual file uploads in it?

11

I recommend checking ASP.NET Core's official documentation about uploading files. There are many ways to save a file and they all depend on the actual developer requirements.

1 Like
12

I have the files uploading to a database now. Thanks for the pointer. One other thing I need to work ot is how to add an additional variable to the call. I am submitting a form and then uploading attachments but I want to pass the form id to the database at the same time so that we have a foriegn key in the attachments table to the forms table.Can you help with that please?
I think the question I should be asking is how to access a global property in a controller. I set the global property from a page and can read the value in a page but reading the same property in a controller produces a null result.

13

You can pass parameters using the URL. Check again our demo:
https://blazor.radzen.com/example-upload

1 Like
14

Thanks, I'm good at missing the obvious. I appreciate your patience.

1 Like
15

@enchev how can I get the result from the Upload controller? I need that so I can link the FileId to another record in the DB.

16

Seems there is a RawResponse Field but the Tool doesn't show that.

17

I would like to share my approach:

I followed the steps on this stackoverflow post:
https://stackoverflow.com/questions/59121741/anti-forgery-token-validation-in-mvc-app-with-blazor-server-side-component

And then added the header to the RadzenUpload like this:

//inject first
@inject TokenProvider tokenProvider

...
        <RadzenUpload Url="upload/single" Accept="image/*">
            <RadzenUploadHeader Name="RequestVerificationToken" Value="@tokenProvider.AntiForgeryToken"/>
        </RadzenUpload>
...
1 Like