Andrew Flierman
Andrew Flierman Founder/Partner Codenamed en .NET webdeveloper
| 0 reactie(s)

HowTo: upload files met Aurelia naar ASP.NET Core (API) controller

Upload files met Aurelia naar ASP.NET Core (API) controller

In ASP.NET Core zijn de file uploads anders dan je gewend bent. In de vorige versies van ASP.NET maakten we gebruik van HttpPostedFileBase om server-side files te kunnen binden. In ASP.NET Core is dit concept vervangen door IFormFile.

De basis van het uploaden van een file met ASP.NET MVC wordt hier goed uitgelegd. Om files te uploaden met Razor en ASP.NET Core bekijk de file upload docs.

Omdat er tegenwoordig veel gebruikt gemaakt wordt van JavaScript client frameworks zoals Angular en Aurelia focus ik mij op het uploaden van een file vanuit een Aurelia webapplicatie naar een MVC 6 controller.

Aurelia is een JavaScript client framework en maakt gebruikt van de fetch-api om requests uit te voeren naar de backend, in ons geval een MVC 6 (API) controller.

Om te beginnen starten we met de HTML om bestanden te kunnen selecteren:

Als er een bestand geselecteerd wordt door de gebruiker zal de property selectedFiles gebind worden met het bestand en de submit-knop zichtbaar worden.

Vervolgens kunnen we de upload functie aanspreken als er op de submit knop geklikt wordt:

De upload functie ziet er als volgt uit:

Om de fetch method te gebruiken moet deze geïmporteerd en geïnitialiseerd worden:

Er wordt nu een request gedaan naar de MVC controller die gebruik maakt van de nieuwe IFormFile interface:

Opvallend is misschien dat er geen method-parameter is. In de ‘standaard’ (synchrone) situatie zoals beschreven in de ASP.NET Core docs wordt er gebruik gemaakt van een method-parameter om de file via modelbinding beschikbaar te maken in de controller method. In de SPA scenario (zoals wij hebben) is de ervaring dat deze method-parameter altijd een null value heeft en dus niet gebind wordt. Daarom kies ik er voor om deze method-parameter achterwege te laten en te kiezen voor de asynchrone aanpak met await Request.ReadFormAsync().

That’s it, zo kun je een file (of meerdere) uploaden vanuit een Aurelia webapplicatie naar een ASP.NET Core (API) controller.

 

Wil je meer lezen van Andrew Flierman? Bezoek zijn eigen site dan hier.

 

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Meer weten over onze werkwijze en dienstverlening? Neem gerust contact met ons op!