1

Hola Amigos quiero mandar un ajax con ciertos datos de usuario y un archivo pdf que quiero guardar dentro de mi app web. Pero no logro pasar los archivos. Siento que en mi modelo podría estar el problema.

modelo:

  public class SolicitudBolsa
{
    public string name { get; set; }
    public string email { get; set; }
    public string subject { get; set; }
    public string message { get; set; }


    public IList<IFormFile> files { get; set; }

}

Aquí es donde los quiero recibir, pero mande o no mande archivos pdf files siempre llega vacio.

    [HttpPost]
    public string BolsaDeTrabajoContacto(SolicitudBolsa formdata)
    {


        var fx = formdata.files;


        var email = formdata.email;
        var subject = formdata.subject;
        var name = formdata.name;
        var message = formdata.message;

Mi ajax

    event.preventDefault();
    var name = $('#name_bolsa').val();
    var email = $('#email_bolsa').val();
    var message = $('#message_bolsa').val();
    var subject = $('#subject_bolsa').val();

    var input = document.getElementById("file_bolsa");
    var files = input.files;

     //var data = new FormData();
/*
    for (var i = 0; i < files.length; i++) {

        data.append(files[i].name, files[i]);

    }
    */
    var data = {
        name: name,
        email: email,
        message: message,
        subject: subject,
        files :files
    };


   // data.files = files;

    console.log(data);

    $.ajax({
        url: "/test/BolsaDeTrabajoContacto",
        type: "POST",
        dataType: "text",
        //processData: false,
        //contentType: false,
        //contentType: "application/json; charset=utf-8",
        data: data,
        success: function (response) {

            //alert('ok'+res);
            //console.log(table);
            //console.log(JSON.stringify(table));
            console.log(response);
            alert(response);
        },

Entonces hasta ahora me manda el siguiente error:

TypeError: 'item' called on an object that does not implement interface FileList.

SI uso processData: false, contentType: false, El error desaparece, pero cuando veo formdata.files llega null

ok todo lo anterior persiste si intento mandarlo por ajax, logré cachar mis datos en el servidor, pero usando un form de razor.

@using (Html.BeginForm("BolsaDeTrabajoContacto", "Test", FormMethod.Post, new { enctype = "multipart/form-data" })) {
<div class="form-row">
  <div class="form-group col-md-6">
    <input type="text" name="name" class="form-control" id="name_bolsa" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" value="x" required />
    <div class="validation"></div>
  </div>
  <div class="form-group col-md-6">
    <input type="email" class="form-control" name="email" id="email_bolsa" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" required value="[email protected]" />
    <div class="validation"></div>
  </div>
</div>
<div class="form-group">
  <input type="text" class="form-control" name="subject" id="subject_bolsa" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" required value="subbbb" />
  <div class="validation"></div>
</div>
<input type="file" id="file_bolsa" name="files" value="" required/>
<div class="form-group">
  <textarea class="form-control" id="message_bolsa" rows="5" data-rule="required" name="message" data-msg="Please write something for us" placeholder="Message" required>jiss</textarea>
  <div class="validation"></div>
</div>
<div class="text-center">
  <button class="btn btn-success" type="submit">Enviar</button>
</div>
}

Este es el mismo formulario que estaba usando para cachar con el ajax.

Alguien sabe a que se podría deber?

6
  • No veo que estes pasando la variable files
    – alanfcm
    el 16 ago. 2019 a las 21:01
  • verdad, terminaré de editar. Si le paso así como esta ahorita files , me manda : TypeError: 'item' called on an object that does not implement interface FileList el 16 ago. 2019 a las 21:03
  • Saludos bro, por favor, ¿podrías editar tu pregunta agregando el HTML de la vista donde está el AJAX?
    – fredyfx
    el 16 ago. 2019 a las 21:49
  • @fredyfx hola Freddy fijate que ya logré mandar los datos, pero no por medio de un ajax, si no por medio de un form de razor, el ajax en consola me mostraba que recibía todos mis dartos, entre ellos mis archivos, pero mi asp no los recibía, sabes a que se podría deber? porque aunque ya mandé los datos aún quiero manejar la respuesta del form el 19 ago. 2019 a las 16:39
  • Por eso mismo, edita tu pregunta, agrega el html que usas, así podremos reproducir tu escenario con mayor facilidad. Me late que te hace falta un par de cosas en el código. Lo verifico cuando agregues lo mencionado. Saludos
    – fredyfx
    el 19 ago. 2019 a las 16:49

2 respuestas 2

1

Veamos, acabo de revisar tu escenario y funciona bien con el Html.BeginForm, como el código javascript que has mostrado está incompleto, me tomé el tiempo en generar las partes faltantes (tengo casi la certeza completa que la lógica que usas es la que colocaré)

Primero, en el HTML agregué la propiedad onclick:

<button class="btn btn-success" onclick="lanzarAjax()" type="submit">Enviar</button>

Segundo, la función javascript completa es la siguiente:

<script>

    function lanzarAjax() { 
        event.preventDefault();
        //Obteniendo valores
        var name = $('#name_bolsa').val();
        var email = $('#email_bolsa').val();
        var message = $('#message_bolsa').val();
        var subject = $('#subject_bolsa').val();    

        //Creación de FormData
        var data = new FormData();      

        //Asignar variables y valores
        data.append("name", name);
        data.append("email", email);
        data.append("message", message);
        data.append("subject", subject);

        //Conseguir el input file del HTML
        var input = document.getElementById("file_bolsa");
        //Obtener los archivos
        var files = input.files;        

        for (var i = 0; i < files.length; i++) {
            //Obtener cada archivo de manera individual que se encuentra en el input id="file_bolsa
            var file = document.getElementById("file_bolsa").files[i];
            //Agregar cada archivo al mismo "files", nombre que tienes definido en el modelo bajo la propiedad:
            //public IList <IFormFile> files { get; set; }
            data.append("files", file);
        }

        //Mandar el AJAX 
        $.ajax({
            //Aqui es muy importante que utilices Url Action, te dará mayor control de las rutas.
            url: '@Url.Action("BolsaDeTrabajoContacto", "test")',
            type: "POST",
            processData: false,
            contentType: false,
            data: data,
            success: function (response) {
                    console.log(response);
                    alert(response);
                }
            });
    }
</script>

Finalmente, un poco de teoría de la misma documentación oficial de jQuery:

processData (default: true)

Type: Boolean

By default, data passed in to the data option as an object (technically, anything other than a string) will be processed and transformed into a query string, fitting to the default content-type "application/x-www-form-urlencoded". If you want to send a DOMDocument, or other non-processed data, set this option to false.

Traducido al buen español:

Por defecto, los datos pasados a la opción de datos como un objeto (técnicamente, cualquier otra cosa que no sea una cadena) serán procesados y transformados en una cadena de consulta, que se ajusta al tipo de contenido por defecto "application/x-wwww-form-urlencoded". Si desea enviar un documento DOMDocument u otros datos no procesados, defina esta opción como false

Referencia: https://api.jquery.com/jQuery.ajax/

Información adicional:

Si planeas usar jquery unobtrusive ajax, revisa bien la documentación, que la forma de usar esta librería es ligeramente diferente en ASPnet MVC y ASPnet MVC Core. Si llegas a usarla y te genera doble peticiones en cada click, verifica que hayas realizado sólo 1 llamada a la librería puesto que el problema antes mencionado es efecto de importar el jquery unobstrusive js más de 1 vez. Y hasta donde recuerdo no soporta envío de archivos, salvo le agregues un plugin o hagas alguna modificación en la librería.

0

En ningun momento estas metiendo tu variable files a tu variable data que envias por ajax

Si quieres mandar imagenes y un json tienes que generar un formdata y hacerle append a tu archivo que enviaras para recibirlo en tu controller

aqui un ejemplo en ingles:

https://stackoverflow.com/questions/54424712/fromform-with-iformfile-using-asp-net-core

2
  • ya edité la pregunta, te sugiero no responder para este tipo de comentarios y que mejor comentes la pregunta para que no te bajen puntos :3 el 16 ago. 2019 a las 21:07
  • La respuesta a tu pregunta inicial era eso. Ya edite mi respuesta, espero te sirva/funcione
    – Guasy
    el 16 ago. 2019 a las 21:12

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.