如何使用Angular File Upload（ng-file-upload）将图片上传到后端Laravel / PHP

Question

I having been trying to wrap my head around ng-file-upload but without much success.

I'm trying to upload a picture using ng-file-upload to backend PHP/Laravel

I have this in my angular controller:

$scope.upload = function (file) {

    Upload.upload({
        method: 'POST',
        url: '/profile/photo/add',
        file: file,
        sendFieldsAs: 'form'
        //fileFormDataName: 'photo'
    })

    .success(function (data, status, headers, config) {
          dd(data);
          console.log('file ' + config.file.name + 'uploaded. Response: ' + data);
     })

    .error(function (data, status, headers, config) {
          dd(data);
          console.log('error status: ' + status);
     })

HTML Template for ng file upload:

<div ngf-select="upload($file, $event)"
  ngf-change="upload($file, $event)"
  ngf-pattern="'image/*'"
  ngf-capture="capture"
  ngf-drag-over-class="{accept:'dragover', reject:'dragover-err',      delay:100}"
  ngf-validate="{size: {min: 10, max: '1MB'}, width: {min: 200, max:10000},  height: {min: 200, max: 300}, duration: {min: '10s', max: '5m'}, pattern: 'image/*'}"
  ngf-keep="false"
  ngf-allow-dir="true" class="drop-box"
  ngf-drop-available="dropAvailable">Select Photo,
  <span ng-show="dropAvailable">Drop/Paste Photo</span>

I have also created a route/controller in Laravel

public function postAdd(PhotoRequest $request)
{
    //Here am just checking if file is valid but it always return false and uploads an unreadable file to /uploads/profile folder 
    if ($request->file('file')->isValid() && $request->hasFile('file')) {
        $request->file('file')->move(public_path('/uploads/profile/'));
        return json_encode($request->file('file')->isValid()); //returns false
    }else{
        return response()->json(['file not found']);
    }

 }

When examined in chrome console, the output looks like this:

These unreadable files were uploaded

What am I doing wrong?