title: How to upload picture with Angular File Upload (ng-file-upload) to backend Laravel/PHP
body: <p>I having been trying to wrap my head around ng-file-upload but without much success.</p>
  
  <p>I'm trying to upload a picture using <strong>ng-file-upload</strong> to backend PHP/Laravel </p>
  
  <p><strong>I have this in my angular controller:</strong></p>
  
  <pre><code>$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);
       })
  </code></pre>
  
  <p><strong>HTML Template for ng file upload:</strong></p>
  
  <pre><code>&lt;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"&gt;Select Photo,
    &lt;span ng-show="dropAvailable"&gt;Drop/Paste Photo&lt;/span&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>I have also created a route/controller in Laravel</strong></p>
  
  <pre><code>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-&gt;file('file')-&gt;isValid() &amp;&amp; $request-&gt;hasFile('file')) {
          $request-&gt;file('file')-&gt;move(public_path('/uploads/profile/'));
          return json_encode($request-&gt;file('file')-&gt;isValid()); //returns false
      }else{
          return response()-&gt;json(['file not found']);
      }
  
   }
  </code></pre>
  
  <p><strong>When examined in chrome console, the output looks like this:</strong>
  <a href="https://i.stack.imgur.com/UHNEW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UHNEW.png" alt="enter image description here"></a></p>
  
  <p><strong>These unreadable files were uploaded</strong></p>
  
  <p><a href="https://i.stack.imgur.com/ocXpa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ocXpa.png" alt="enter image description here"></a></p>
  
  <p><strong>What am I doing wrong?</strong></p>