title: Image upload issue: Angularjs and Laravel API
body: <p>I am trying to upload image on my server but my api didn't get the file and says "Call to a member function getClientOriginalExtension() on null". I don't know where is the problem . here is my code. I am not getting how to validate it. please help me.</p>
  
  <p><strong>Request headers</strong></p>
  
  <pre><code>Accept:/
  Accept-Encoding:gzip, deflate
  Accept-Language:en-US,en;q=0.8
  Connection:keep-alive
  Content-Length:1164
  Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryQV7RNhEPsxqsIhSi
  Host:{url}:8081
  Origin:http://localhost:3000
  Referer:http://localhost:3000/contacts
  UID:7798616828
  User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.23.2883.75 Safari/537.36
  X-Requested-With:XMLHttpRequest
  </code></pre>
  
  <p><strong>Request payload</strong></p>
  
  <pre><code>------WebKitFormBoundaryQV7RNhEPsxqsIhSi
  Content-Disposition: form-data; name="ID"
  
  203
  ------WebKitFormBoundaryQV7RNhEPsxqsIhSi
  Content-Disposition: form-data; name="flowChunkNumber"
  
  1
  ------WebKitFormBoundaryQV7RNhEPsxqsIhSi
  Content-Disposition: form-data; name="flowChunkSize"
  
  1048576
  ------WebKitFormBoundaryQV7RNhEPsxqsIhSi
  Content-Disposition: form-data; name="flowCurrentChunkSize"
  
  812402
  ------WebKitFormBoundaryQV7RNhEPsxqsIhSi
  Content-Disposition: form-data; name="flowTotalSize"
  
  812402
  ------WebKitFormBoundaryQV7RNhEPsxqsIhSi
  Content-Disposition: form-data; name="flowIdentifier"
  
  812402-C360_2017-01-05-13-21-41-180jpg
  ------WebKitFormBoundaryQV7RNhEPsxqsIhSi
  Content-Disposition: form-data; name="flowFilename"
  
  C360_2017-01-05-13-21-41-180.jpg
  ------WebKitFormBoundaryQV7RNhEPsxqsIhSi
  Content-Disposition: form-data; name="flowRelativePath"
  
  C360_2017-01-05-13-21-41-180.jpg
  ------WebKitFormBoundaryQV7RNhEPsxqsIhSi
  Content-Disposition: form-data; name="flowTotalChunks"
  
  1
  ------WebKitFormBoundaryQV7RNhEPsxqsIhSi
  Content-Disposition: form-data; name="file"
  
  ------WebKitFormBoundaryQV7RNhEPsxqsIhSi--
  </code></pre>
  
  <p><strong>html</strong></p>
  
  <pre><code>           &lt;div id="contact-image-uploader"
                flow-init="vm.ngFlowOptions"
                flow-name="vm.ngFlow.flow"
                flow-files-submitted="vm.upload($file)"
                flow-file-added="vm.fileAdded($file)"
                flow-file-success="vm.fileSuccess($file, $message)"
                flow-complete="vm.uploadComplete()"
                flow-drop
                flow-drag-enter="vm.dropping=true"
                flow-drag-leave="vm.dropping=false"
                ng-class="{'dropping':vm.dropping}"&gt;
  
                &lt;md-button aria-label="Add file" translate flow-btn&gt;
                &lt;img ng-src="{{vm.contact.image}}" class="md-avatar avatar    contact-avatar huge"alt="{{vm.contact.name}}"/&gt;
                          &lt;/md-button&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p><strong>Angular code</strong></p>
  
  <pre><code>function upload(image)
          {
            vm.ngFlow.flow.opts.headers = {
                  'X-Requested-With': 'XMLHttpRequest',
                  'UID'    : '7798616828'
              };
              vm.ngFlow.flow.opts.query = {'ID':'203'};
              vm.ngFlow.flow.opts.testMethod = 'post';
              vm.ngFlow.flow.opts.uploadMethod = 'post';
              vm.ngFlow.flow.opts.target = 'http://{url}/contact/image/upload';
  
              vm.ngFlow.flow.upload();
          }
  </code></pre>
  
  <p><strong>Laravel API</strong></p>
  
  <pre><code>public function upload_image(Request $request){
  
          $photo = $request-&gt;file('file');
          $imagename = time().'.'.$photo-&gt;getClientOriginalExtension(); 
  
          $destinationPath_thumb = storage_path('images/contact/thumbnail_images');
          $thumb_img = Image::make($photo-&gt;getRealPath())-&gt;resize(100, 100);
          $thumb_img-&gt;save($destinationPath_thumb.'/'.$imagename,80);
  
          $destinationPath_medium = storage_path('images/contact/medium_images');
          $medium_img = Image::make($photo-&gt;getRealPath())-&gt;resize(500, 500);
          $medium_img-&gt;save($destinationPath_medium.'/'.$imagename,80);
  
          $destinationPath_original = storage_path('images/contact/original_images');
          $photo-&gt;move($destinationPath_original, $imagename);
  
          $user = \App\User::select(['inst_id'])-&gt;where('mobile','=',$request-&gt;header('UID'))-&gt;first();
  
          $update_img = \App\Contact::where([['id','=',$request-&gt;ID],['inst_id','=',$user-&gt;inst_id]])-&gt;update(['image'=&gt;$imagename]);
  
          if($update_img)
            $response = response()-&gt;json(['data'=&gt;[], 'error'=&gt;0,  'error_msg'=&gt;'', 'message'=&gt;'Profile updated']);
          else
            $response = response()-&gt;json(['data'=&gt;[], 'error'=&gt;1,  'error_msg'=&gt;'some went wrong', 'message'=&gt;'Please try again']);
  
      return  $response;
    }
  </code></pre>