Uploadons nos fichiers avec mvc.net core dotnet 6.0

Pour uploader un fichier, nous avons plusieurs choix dans dotnet 6.0, avec mvc.core.
Utiliser fetch (et penser à polyfill votre fetch si vous êtes sous IE par exemple). Vous pouvez aussi utiliser simplement la méthode POST.

Un formulaire plus précis

Pour bien démarrer, vous devez ajouter un formulaire avec la précision form-data pour récupérer les données binaires.

<form method="post" enctype="multipart/form-data">
    <input type="file" name="picture" multiple />
    <button>Load files</button>
</form>

Vous notez également le champ Input qui va permettre d’uploader votre fichier sur le serveur.
Fait important : C’est bien un type file.
Deuxième point important, vous pouvez, grâce à multiple, permettre l’upload de plusieurs fichiers en même temps.

Une récupération par une action HttpPost

Du côté controller, vous allez prévoir une action, qui est filtrée par un HttpPost.

[HttpPost]
public IActionResult Index(IList<IFormFile> picture)
{
    return View();
}

Notez ici la liste des fichiers, de type IFormFile. Vous allez pouvoir parcourir toute la liste des fichiers uploadés.

Point très important ici : le nom de la variable « picture » doit correspondre au name dans votre input, du côté Html. Sinon, vous aurez toujours null dans la variable.

Sauvegarder les données

        [HttpPost]
        public async Task<IActionResult> Index(IList<IFormFile> picture)
        {
            foreach (var item in picture)
            {
                using var file = System.IO.File.OpenWrite("c:\\Tests\\test-" + item.FileName);
                await item.CopyToAsync(file);
            }

            return View();
        }

Notons ici l’utilisation de l’async / await pour la copy du contenu du fichier.

Et voilà, vous pouvez récupérer les données de vos fichiers !

Attention à ne pas enregistrer le fichier avec le nom proposé par le IFormFile. C’est un conseil proposé également par dotnet, dans sa documentation sur l’upload.