Comment faire en sorte que le plug-in Uploadify de jQuery fonctionne avec ASP.NET MVC?

Question

Je suis en train d'essayer d'obtenir le plug-in jQuery, Uploadify , afin de fonctionner avec ASP. NET MVC.

J'ai le plugin qui se présente bien avec l'extrait de code JavaScript suivant:

<script type="text/javascript">
    $(document).ready(function() {
        $('#fileUpload').fileUpload({
            'uploader': '/Content/Flash/uploader.swf',
            'script': '/Placement/Upload',
            'folder': '/uploads',
            'multi': 'true',
            'buttonText': 'Browse',
            'displayData': 'speed',
            'simUploadLimit': 2,
            'cancelImg': '/Content/Images/cancel.png'
        });
    });
</script>

Ce qui semble être tout va bien. Si vous remarquez, le & script; script " L'attribut est défini sur mon / placement / téléchargement, qui est mon contrôleur de placement et mon action de téléchargement.

Le problème principal est que j’ai du mal à faire en sorte que cette action soit déclenchée pour recevoir le fichier. J'ai défini un point d'arrêt sur cette action et lorsque je sélectionne un fichier à télécharger, il n'est pas exécuté.

J'ai essayé de modifier la signature de la méthode à partir de cet article :

public string Upload(HttpPostedFileBase FileData)
{
    /*
    *
    * Do something with the FileData
    *
    */
    return "Upload OK!";
}

Mais cela ne déclenche toujours pas.

Quelqu'un peut-il m'aider à écrire et à obtenir correctement la signature de l'action de contrôleur de téléchargement afin qu'elle se déclenche? Je peux ensuite gérer moi-même le traitement des données du fichier. J'ai juste besoin d'aide pour obtenir le déclenchement de la méthode.

Answer 1

public string Upload(HttpPostedFileBase FileData) {}

est correct - le fichier téléchargé par uploadify sera lié à FileData. Inutile d'entrer dans Request.Files pour récupérer le fichier, ce qui rend plus difficile la simulation et le test.

Si votre action ne déclenche pas du tout (c'est-à-dire essayez de déboguer et voyez si un point d'arrêt dans la méthode est touché), votre problème est probablement la valeur de "script" - exécutez-vous dans un répertoire virtuel? Si c'est le cas, vous devrez mettre le nom du répertoire au premier plan. Uploadify utilise un chemin absolu.

i.e. 'script:' / virtual_directory / Placement / Upload '

En ce moment, uploadify envoie à http: // localhost / Placement / Upload .

essayez également d’utiliser le débogueur d’itinéraire ( http: // piraté .com / archive / 2008/03/13 / url-routing-debugger.aspx ) pour vérifier où votre route est mappée.

Answer 2

Le problème peut être que vous devez spécifier que l'action que vous téléchargez est définie sur Post ... elle ne fonctionnera pas avec l'action en tant qu'action Get.

Donc, ceci:

public string Upload(HttpPostedFileBase FileData)
{
   //do something
}

Devrait être ceci:

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Upload(HttpPostedFileBase FileData)
{
   //do something
}

Sachez également que si vous utilisez cette option dans un " connecté " section de votre site, vous devriez jeter un coup d’œil ici pour trouver un bogue connu avec uploadify et l’authentification: http://geekswithblogs.net/apopovsky/archive/2009/05/06/working-around-flash-cookie-bug-in-asp .net-mvc.aspx

De plus, MVC dispose de plusieurs moyens pour gérer les téléchargements de fichiers (en utilisant Request.Files selon la suggestion de Rory Fitzpatrick, ainsi qu'en transmettant le fichier HttpPostedFileBase en tant qu'argument dans la définition de l'action). Cela ne devrait pas vraiment avoir d'importance pour que Uploadify fonctionne.

Answer 3

Ce n’est pas ainsi que j’ai dû implémenter le téléchargement de fichiers. J'avais une méthode d'action sans paramètre qui utilisait l'objet Request actuel pour plonger dans la collection de fichiers publiés.

Quelques exemples de code de mon implémentation:

[AcceptVerbs(HttpVerbs.Post)]
public ContentResult Upload() {
    if (Request.Files.Count > 0 && Request.Files[0].ContentLength > 0) {
        HttpPostedFileBase postedFile = Request.Files[0];
        // Do something with it
    }
}

Bien sûr, écrire des tests pour cela devient un PITA. Vous devez vous moquer de plusieurs objets pour le faire fonctionner, par exemple:

var mockHttpContext = mocks.StrictMock<HttpContextBase>();
var mockRequest = mocks.StrictMock<HttpRequestBase>();
var postedFile = mocks.StrictMock<HttpPostedFileBase>();

var postedFileKeyCollection = mocks.StrictMock<HttpFileCollectionBase>();

mockHttpContext.Expect(x => x.Request).Return(mockRequest).Repeat.Any();
mockRequest.Expect(x => x.Files).Return(postedFileKeyCollection).Repeat.Any();

postedFileKeyCollection.Expect(x => x[0]).Return(postedFile).Repeat.Any();
postedFileKeyCollection.Expect(x => x.Count).Return(1);

postedFile.Expect(f => f.ContentLength).Return(1024);
postedFile.Expect(f => f.InputStream).Return(null);

Il serait plus facile de créer une interface dans les fichiers postés et de ne le simuler qu'avec une implémentation concrète injectée dans votre contrôleur à l'aide d'IoC.

Je pense que cela était en grande partie basé sur ce message: Mettre en place un lien MVC, y compris les tests et simulations

Answer 4

Ma solution complète à ce problème pourrait résoudre votre problème. J'espère que ça aide.

http: //zootfroot.blogspot. com / 2010/12 / mvc-file-upload-using-uploadify-with.html

Answer 5

En lisant la documentation, on dirait qu’il envoie un tableau de fichiers. Avez-vous essayé:

public string Upload( HttpPostedFileBase[] fileData )

Il est également possible que le classeur de modèles par défaut ne fonctionne pas avec HttpPostedFileBase et vous devrez soit utiliser le mécanisme de Rory, soit écrire votre propre classeur de modèles.

Answer 6

Voici ma simple vue Razor (le maître de la mise en forme possède les bundles Javascript)

@{
ViewBag.Title = "Upload Email CSV";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script type="text/javascript" src="@Url.Content("~/Scripts/Uploadify/jquery.uploadify.js")"></script>

<script type="text/javascript">

$(function () {
    var uploadUrl = "@Url.Content("~/UploadFile/UploadEmailCSV/")";
    var uploadSWF = "@Url.Content("~/Scripts/Uploadify/uploadify.swf")";
    var uploadifyButtonImage = "@Url.Content("~/Scripts/Uploadify/uploadify.swf")";

    $('#file_upload').uploadify({
        'fileSizeLimit': '0',
        'buttonImage': '/uploadify/browse-btn.png',
        'swf': uploadSWF,
        'uploader': uploadUrl,
        'onUploadSuccess': function(file, data, response) {
            alert('The file was saved to: ' + data);
        }
    });
});
</script>
<h2>Upload a comma separated list of email addresses</h2>
@using (Html.BeginForm("UploadEmailCSV", "UploadFile", FormMethod.Post, new { @class = "form-horizontal", @enctype = "multipart/form-data", @id = "frmUploadFiles" }))
{
    <input type="file" name="file_upload" id="file_upload" />
}

Voici la méthode Contoller

public ActionResult UploadEmailCSV()
    {
        var uploadedFile = Request.Files["Filedata"];

        if (uploadedFile != null && uploadedFile.ContentLength > 0)
        {
            var filePath = Path.Combine(Server.MapPath("~/UploadedFiles"), string.Format("{0}_{1}{2}", Path.GetFileNameWithoutExtension(uploadedFile.FileName), DateTime.Now.Ticks, Path.GetExtension(uploadedFile.FileName)));
            uploadedFile.SaveAs(filePath);
            return Content(string.Format("{0}_{1}{2}", Path.GetFileNameWithoutExtension(uploadedFile.FileName), DateTime.Now.Ticks, Path.GetExtension(uploadedFile.FileName)));

        }
        return Content("Error Uploading file!");
    }

C'est tout!