Hi I want to pass formdata with input type file but how can I do it?

Question

I have this function when I change the input type file to insert into database, in Laravel.

$(document).on('change', '#galeria_imagen', function () {

    var elab = $('#elaboracion_ins').val();
    var formdata = new FormData();

    formdata.append("galeria_imagen", $('input[name=galeria_imagen]')[0].files[0]);

    console.log(prueba);
    $.ajax({
        type: 'POST',
        url: "/admin/elaboraciones/ajax/setGaleria",
        processData: false,
        data: formdata,
        success: function () {
            recargar_galeria(elab);
        }
    });
});

And always return me " Illegal invocation " and I put ProcessData:false and don't work for me because don't insert, in Laravel I need a base64 hash to insert a file.

Answer 1

Without seeing your HTML we can't really tell. But I think you're setting galeria_imagen as a name not an id , so that won't get you anywhere. Also, when you're inside a handler, the this context is actually the element itself, so you could simply do this.files[0] .

$(document).on('change', 'input[name="galeria_imagen"]', function() {
  var elab = $('#elaboracion_ins').val();
  var formdata = new FormData();

  formdata.append(this.name, this.files[0]);

  $.ajax({
    type: 'POST',
    url: "/admin/elaboraciones/ajax/setGaleria",
    processData: false,
    data: formdata,
    success: function() {
      recargar_galeria(elab);
    }
  });
});

Answer 2

add multipart/form-data as mime type

$(document).on('change', '#galeria_imagen', function () {

var elab = $('#elaboracion_ins').val();
var formdata = new FormData();

formdata.append("galeria_imagen", $('input[name=galeria_imagen]')[0].files[0]);

console.log(prueba);
$.ajax({
    type: 'POST',
    url: "/admin/elaboraciones/ajax/setGaleria",
    mimeType: "multipart/form-data",
    processData: false,
    contentType: false,
    data: formdata,

    success: function () {
        recargar_galeria(elab);
    }
});
});

Answer 3

Here is a boilerplate that works - see http://jsfiddle.net/09o71yjc/

$('form.uploader input:file').on('change', function() {

    var data = new FormData();
    data.append('file', this.files[0]);

    $.ajax({
        url: $('.uploader').attr('action'),
        type: 'POST',
        dataType: 'json',
        processData: false,
        data: data,
        success: function () {
            alert('Uploaded')
        }
    });
});