Laravel Ajax File Upload. Cannot pass data on ajax

HTML

<div class="modal-body">
  <form class="change-picture" action="" method="post" role="form" enctype="multipart/form-data">
    <ul class="list-inline upload-tab text-center">
      <li><strong><label for="browse"><i class="fa fa-folder-open fa-fw"></i><input id="browse" type="file" name="browse">Browse Photo</label></strong></li>
      <li><strong><a href="#!" data-toggle="modal" data-target="#myModal2"><i class="fa fa-camera-retro fa-fw"></i>Take a Photo</a></strong></li>
      <li><strong><a href="#!"><i class="fa fa-image fa-fw"></i>Open Gallery</a></strong></li>
    </ul>

  <div class="upload-drop-zone" id="drop-zone">
    <div class="text-center mar-top">Drag & Drop Here</div>
    <img src="" id="drop-image" class="img-thumbnail" alt="">
  </div>

  <div class="progress">
     <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div>
  </div>
</div>//modal body end tag

<div class="modal-footer">
  <button type="submit" class="btn btn-sm btn-primary">Upload</button>
</div>

  <input type="hidden" name="_token" value="">
  </form>
</div>//modal content end tag

JS

$(document).on('submit', '.change-picture', function(event) {
  var file = $(this).find('input')[0].files,
  action = this.action;

  $.ajax({
    url: action,
    type: 'POST',
    data: {browse: file},
    processData: false,
    contentType: false
  })
  .done(function(data) {
    console.log(data);// this return null
    $('.modal').modal('hide');
  });
event.preventDefault();
});

PHP Laravel Controller

public function uploadProfilePic($username, Request $request) {
    //this return null
    return response()->json(['url' => $request["browse"]], 200);
}

I've tried the following: $_FILES["browse"], $request->file("browse"), $request["browse"];

Any helps or suggestion will appreciated. Tnx in advance... Newbie here!

via Chebli Mohamed