Upload image using Ajax and laravel

im working in my laravel projecto, and im using ajax, but im having some issues in one of the fields, input file, ajax is not sending or detecting the file input field, it sends data from other inptus fields but not the file here is my code above:

$('#savePersonalData').click(function(event) {
            event.preventDefault();
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },

                method: 'PUT',
                url: '{{url('personaldata')}}/{{$user->id}}',
                data: $( '#personalDataForm' ).serialize()


            }).done(function(response){
                //console.log(JSON.stringify(response));
                console.log(response);
            }).fail(function(response) {
                console.log(response.responseJSON);
            });

        });

html:

some inputs fields (text, options,etc)...
 <div style="text-align: right;" class="col-md-4 ">
                                <div id="image-preview">
                                    <label for="image-upload" id="image-label">Foto Perfil</label>
                                    <input type="file" name="avatar" id="image-upload" />
                                </div>

                            </div>

extjac

9 years ago

Level 6

i used this

<form id="formUploadFile" method="POST" enctype="multipart/form-data" action="/api/v1/upload">

        <div class="modal-body">

          <input type="file"    name="file" id="file"> 
          <input type="hidden"  name="category_id" id="category_id" value="1"> 
          <input type="hidden"  name="item_id" id="item_id" value="{{$item->item_id}}">
          <p><span id="spin_upload"></span></p>

          <div class="progress">
              <div class="bar"></div >
              <div class="percent">0%</div >
          </div>

          <div id="status"></div>

         </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <input type="submit" class="btn btn-primary"  value="Upload"> 
        </div>

      </form>  

<script src="http://malsup.github.com/jquery.form.js"></script>
<script>
(function() {
    
var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');
   
$('#formUploadFile').ajaxForm({
    beforeSend: function() {
        status.empty();
        var percentVal = '0%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    uploadProgress: function(event, position, total, percentComplete) {
        var percentVal = percentComplete + '%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    success: function() {
        var percentVal = '100%';
        bar.width(percentVal)
        percent.html(percentVal);
        //reload
        filesTable.api().ajax.reload();
        //hide
            $('#uploadModal').modal('hide');
    },
  complete: function(xhr) {
    //status.html(xhr.responseText);
  }
}); 
})();       
 </script>

mcenroe

9 years ago

Level 5

@mbpp Are you adding the enctype="multipart/form-data" to the form tag?

mbpp

9 years ago

Level 3

yes

Please or to participate in this conversation.