¿Cómo consigo que el complemento Uploadify de jQuery funcione con ASP.NET MVC?

asp.net-mvc

Question

Estoy en el proceso de intentar que el complemento jQuery, Uploadify , funcione con ASP.NET MVC.

Tengo el complemento que se muestra bien con el siguiente fragmento de JavaScript:

<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>

Lo cual parece que todo está bien en bien. Si lo nota, el atributo "script" se establece en my / Placement / Upload, que es mi controlador de ubicación y mi acción de carga.

El principal problema es que tengo dificultades para disparar esta acción y recibir el archivo. Establecí un punto de interrupción en esa acción y cuando selecciono un archivo para cargar, no se está ejecutando.

Intenté cambiar la firma del método en base a este artículo :

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

Pero esto todavía no se dispara.

¿Alguien puede ayudarme a escribir y obtener la firma de la acción del controlador de carga correctamente para que realmente se active? Entonces puedo manejar el manejo de los datos del archivo yo mismo. Solo necesito ayuda para activar el método de acción.

Answer 1

Al leer la documentación, parece que está enviando una matriz de archivos. Has probado:

public string Upload( HttpPostedFileBase[] fileData )

También es posible que el encuadernador de modelo predeterminado no funcione con HttpPostedFileBase y tendrá que usar el mecanismo de Rory o escribir su propio encuadernador de modelo.

Answer 2

Aquí está mi simple Razor View (El maestro de diseño tiene los paquetes de 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" />
}

Aquí está el Método 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!");
    }

¡Eso es!

Answer 3

El problema podría ser que necesita especificar que la acción a la que está cargando está configurada para Publicar ... no funcionará con la acción como una acción Obtener.

Así que esto:

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

Debería ser esto:

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

Además, tenga en cuenta que si está utilizando esto en una sección "iniciada sesión" de su sitio, debería echar un vistazo aquí para encontrar un error conocido con uploadify y autenticación: http://geekswithblogs.net/apopovsky/archive/2009/05/06/working-around-flash-cookie-bug-in-asp.net-mvc.aspx

Además, solo un lado, hay varias formas en MVC para manejar las cargas de archivos (usando Request.Files según la sugerencia de Rory Fitzpatrick, así como pasar el archivo HttpPostedFileBase como un argumento en la definición de acción). Realmente no debería importar para que Uploadify funcione.

Answer 4

Mi solución completa a esto podría resolver su problema. Espero eso ayude.

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

Answer 5

No es así como tuve que implementar la carga de archivos. Tenía un método de acción sin parámetros que utilizaba el objeto de solicitud actual para sumergirse en la colección de archivos publicados.

Algunos ejemplos de código de mi implementación:

[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
    }
}

Por supuesto, escribir pruebas para esto se convierte en un PITA. Tienes que burlarte de varios objetos para que funcione, por ejemplo:

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);

Sería más fácil crear una interfaz en los archivos publicados y solo simular eso, con una implementación concreta inyectada en su controlador usando IoC.

Creo que esto se basó principalmente en esta publicación: Implementación de la carga de archivos HTTP con ASP.NET MVC, incluidas las pruebas y los simulacros

Answer 6

public string Upload(HttpPostedFileBase FileData) {}

es correcto: el archivo cargado por uploadify se vinculará a FileData. No es necesario entrar en Request.Files para recuperar el archivo, lo que hace que sea más difícil burlarse y probar.

Si su acción no se ejecuta en absoluto (es decir, intente depurar y vea si se alcanza un punto de interrupción dentro del método), es probable que su problema sea el valor ''script'': ¿se está ejecutando bajo un directorio virtual? Si es así, tendrá que poner el nombre del directorio por adelantado. Uploadify está usando una ruta absoluta.

es decir ''script:'' / virtual_directory / Placement / Upload ''

en este momento, uploadify está enviando a http://localhost/Placement/Upload .

También intente utilizar el depurador de ruta ( http://haacked.com/archive/2008/03/13/url-routing-debugger.aspx ) para verificar a dónde está asignada su ruta.