Enviar archivos por ajax en laravel

publicado por: Anonymous

Tengo un formulario con ajax y necesito enviar dos archivos tipo imagen, si lo envío sin el ajax me funciona bien, pero lo quiero enviar con ajax y no me esta funcionando. Los datos lo recibe pero no envía el archivo por ajax,
entonces la pregunta es:

¿Cómo puedo enviar dos archivos por ajax en laravel?

<form class="form-horizontal" id="formmass" role="form" accept-charset="UTF-8" enctype="multipart/form-data">

    <input type="text" class="form-control" id="id_mass"  disabled>
    <input type='text' class='form-control input-number-line' id='fecha_mass'  maxlength='45'   required='required' autofocus>
    <input type='file' class='form-control' id='fotogeneral_mass_file' maxlength='45'   required='required' autofocus>  
    <input type='file' class='form-control' id='fotodetalle_mass_file' maxlength='45'   required='required' autofocus>                  

    <button type="button" id="acciones" class="btn btn-warning edit" data-dismiss="modal">Editar</button>

</form>
<script type="text/javascript">

$('.modal-footer').on('click', '.edit',function(){
        //var formData = new FormData();
        var formData = new FormData($("#formmass")[0]);
        formData.append('id',$('#id_mass').val());
        formData.append('fecha',$('#fecha_mass').val());
    //  formData.append('fotogeneral_mass_file',$('#fotogeneral_mass_file'));
    //  formData.append('fotodetalle_mass_file',$('#fotodetalle_mass_file'));
        formData.append('_token',$('input[name=_token]').val());

        $.ajax({
            type: 'Post',
            url: '../update/'+id,
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            error: function(jqXHR, text, error){
            toastr.error('Validation error!', 'No se pudo Añadir los datos<br>'+error, {timeOut: 5000});    
            },
            success: function(data){
            toastr.error('Validation true!', 'se pudo Añadir los datos<br>'+error, {timeOut: 5000});    

            }


        });
});
</script>

En el controlador tengo el siguiente archivo, donde me toma el nombre de archivo y le lo guarda, si lo hago sin ajax me funciona.

<?php
        $file = Input::file('fotogeneral_mass_file');
        $nombre = $file->getClientOriginalName();
        Storage::disk('local')->put($nombre,  File::get($file));

        $file2 = Input::file('fotodetalle_mass_file');
        $nombre = $file2->getClientOriginalName();
        Storage::disk('local')->put($nombre,  File::get($file2));

solución

Podrías agregarle el atributo name="" a los <input /> y en vez de poner un evento en el click, directamente cambias el tipo por type="submit", entonces podrías capturar el evento del submit y hacer lo siguiente:

_x000D_

_x000D_

$('#formmass').on('submit', function(e) {_x000D_
  // evito que propague el submit_x000D_
  e.preventDefault();_x000D_
  _x000D_
  // agrego la data del form a formData_x000D_
  var formData = new FormData(this);_x000D_
  formData.append('_token', $('input[name=_token]').val());_x000D_
_x000D_
  $.ajax({_x000D_
      type:'POST',_x000D_
      url: '../update/' + id,_x000D_
      data:formData,_x000D_
      cache:false,_x000D_
      contentType: false,_x000D_
      processData: false,_x000D_
      success:function(data){_x000D_
          toastr.error('Validation true!', 'se pudo Añadir los datos<br>', {timeOut: 5000});_x000D_
      },_x000D_
      error: function(jqXHR, text, error){_x000D_
          toastr.error('Validation error!', 'No se pudo Añadir los datos<br>' + error, {timeOut: 5000});_x000D_
      }_x000D_
  });_x000D_
});

_x000D_

<form class="form-horizontal" id="formmass" role="form" accept-charset="UTF-8" enctype="multipart/form-data">_x000D_
_x000D_
    <input type="text" name="id" class="form-control" id="id_mass"  disabled>_x000D_
    <input type='text' name="fecha" class='form-control input-number-line' id='fecha_mass'  maxlength='45' required='required' autofocus>_x000D_
    <input type='file' name="fotogeneral_mass_file[]" class='form-control' id='fotogeneral_mass_file' maxlength='45' required='required' autofocus>  _x000D_
    <input type='file' name="fotogeneral_mass_file[]" class='form-control' id='fotodetalle_mass_file' maxlength='45' required='required' autofocus>                  _x000D_
_x000D_
    <button type="submit" id="acciones" class="btn btn-warning edit" data-dismiss="modal">Editar</button>_x000D_
_x000D_
</form>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *