0

Buenas, tengo un problema en cuanto a la manera que envió valores de archivo, como uso ajax en jquery y la libreria jquery-formdata, me sale el error de TypeError: 'slice' called on an object that does not implement interface Blob. creo que es por que todo esos valores de los campos los almaceno como un objeto JSON, ademas que uso laravel para guardar las imagenes, o almenos eso se supone:

function FormInfo()
{
    var valor = $("#addUserForm").serialize();
    var json = {};

    var datos = valor.split("&");

    datos.forEach(function(element, index) {
        var info = element.split("=");
        json[""+info[0]] = info[1];
    });

    json["avatar"] = document.getElementById('plox').files[0];

    return json;
}

Este es el codigo con el cual obtengo los valores de los input y los paso a un json al igual que agrego el valor del archivo.

$("#addUserForm").submit(function (event) {
    //Ocultando todos los mensajes de error
    $('.chip').hide();

    event.preventDefault();
    $.ajaxFormData({
        type: "post",
        dataType: "html",
        url: 'users/add',
        contentType: "multipart/form-data",
        data : FormInfo(),
        success: function (response) {
            $("#addUser").modal('close');
            $("#cont-users").addClass('formSubmitted');
            Materialize.toast('Registro ingresado', 3000, 'rounded');
        }

Y esta de aqui es el codigo por el cual envio los datos, y esta es la linea de codigo del controlador de usuario en laravel que me da error:

$request->file('avatar')->store('public');

Asi es la etiqueta form

<form method="POST" action="http://127.0.0.1:8000/users/add" accept-charset="UTF-8" id="addUserForm"><input name="_token" value="kl5DY0aNK0mUt3lR9pGnoeEX8GOlPhdLJkSSh0hd" type="hidden">
7
  • 1
    Simplemente envía un FormData; no puedes enviar binarios en un JSON. data: new FormData(form); donde form es el formulario a enviar por AJAX: const form = document.getElementById('#addUserForm');.
    – gugadev
    el 8 sep. 2017 a las 2:39
  • Bueno al hacer al pie como me dices me lanza este error: TypeError: 'append' called on an object that does not implement interface FormData. el 8 sep. 2017 a las 3:08
  • Perdón, en el document.getElementById elimina el gato (#).
    – gugadev
    el 8 sep. 2017 a las 3:11
  • const form = document.getElementById('addUserForm'); event.preventDefault(); $.ajaxFormData({ type: "post", dataType: "html", url: 'users/add', data : new FormData(form), Bueno algo asi poseo mi codigo, y ahora me sale el error: 'append' called on an object that does not implement interface FormData. el 8 sep. 2017 a las 3:21
  • 1
    Añade estas propiedades al ajax: processData: false, contentType: false
    – gugadev
    el 8 sep. 2017 a las 3:32

1 respuesta 1

1

No puedes enviar archivos binarios por medio de JSON; lo que debes hacer es crear un objeto FormData con los datos del formulario y enviar este objeto por AJAX.

data: new FormData($('#addUserForm')[0]),

Así mismo debes establecer processData en false:

processData: false,

De la documentación 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.

Por defecto, el objeto pasado en data es transformado en una query string; esto por supuesto no funcionará con archivos binarios ya que debe enviarse como tal. Respecto a contentType puedes eliminarla o establecerla en false para que lleve un mime automático.

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.