Envoyer un fichier en POST à ASP.Net MVC

icon Tags de l'article :

Juin 27, 2016
Hello,

Petit article qui peut dépanner : comment envoyer un fichier en POST à une route ASP.Net MVC.

Pour ça, côté HTML, on va d'abord créer un input de type file, et un bouton pour uploader notre fichier (appeler notre route en POST) :

<input type="file" name="fileUpload" id="fileUpload" /><br />
<input type="button" value="Upload" id="buttonUpload" class="btn btn-default" />

Côté JS, on va créer une collection de données de formulaire avec FormData, dans laquelle on va poser notre fichier, et ensuite appeler notre route en POST avec $.ajax :

$('#buttonUpload').on('click', function () {
    var data = new FormData();
    var files = $('#fileUpload').get(0).files;
    // ici on teste si on n'a bien qu'un fichier de sélectionné
    if (1 === files.length) {
        // ici on ajoute notre fichier à notre FormData
        data.append("UploadedFile", files[0]);
        // ensuite on appelle notre route en POST
        $.ajax({
            type: "POST",
            url: 'url/to/call',
            contentType: false,
            processData: false,
            data: data,
            success: function (result) {
                alert('success !');
            }
        });
    } else {
        alert('Error: you must choose a file');
    }
});

Et enfin, côté C#, on va récupérer le fichier à l'aide de Request.Files[]. On pourra ensuite récupérer son stream à l'aide de file.InputStream :

[HttpPost]
public ActionResult Import(int? creatorId, int? userId)
{
    var model = new VM();

    // ici on vérifie bien qu'on aie qu'un seul fichier, pas 0 ou 2
    if (Request.Files.Count != 1)
    {
        model.ErrorMessages.Add("You must upload a file to import profiles");
        return Json(model);
    }

    // ici on récupère bien notre fichier
    var uploadedFile = Request.Files[0];

    // ici on teste si notre fichier termine bien par CSV
    if (!uploadedFile.FileName.EndsWith(".csv", StringComparison.OrdinalIgnoreCase))
    {
        model.ErrorMessages.Add("Invalid extension: only CSV file can be used for import");
        return Json(model);
    }

    var fileStream = uploadedFile.InputStream;

    // ...
    // ici on peut appeler notre code métier
    // ...

    return Json(model);
}

Et voilà !

Bon dev à tous !

Commentaires fermés

icon Flux RSS des commentaires de cet article

Les commentaires sont fermés pour cet article