0

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.

Request headers

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

Request payload

------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--

html

           <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}">

              <md-button aria-label="Add file" translate flow-btn>
              <img ng-src="{{vm.contact.image}}" class="md-avatar avatar    contact-avatar huge"alt="{{vm.contact.name}}"/>
                        </md-button>
      </div>

Angular 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();
        }

Laravel API

public function upload_image(Request $request){

        $photo = $request->file('file');
        $imagename = time().'.'.$photo->getClientOriginalExtension(); 

        $destinationPath_thumb = storage_path('images/contact/thumbnail_images');
        $thumb_img = Image::make($photo->getRealPath())->resize(100, 100);
        $thumb_img->save($destinationPath_thumb.'/'.$imagename,80);

        $destinationPath_medium = storage_path('images/contact/medium_images');
        $medium_img = Image::make($photo->getRealPath())->resize(500, 500);
        $medium_img->save($destinationPath_medium.'/'.$imagename,80);

        $destinationPath_original = storage_path('images/contact/original_images');
        $photo->move($destinationPath_original, $imagename);

        $user = \App\User::select(['inst_id'])->where('mobile','=',$request->header('UID'))->first();

        $update_img = \App\Contact::where([['id','=',$request->ID],['inst_id','=',$user->inst_id]])->update(['image'=>$imagename]);

        if($update_img)
          $response = response()->json(['data'=>[], 'error'=>0,  'error_msg'=>'', 'message'=>'Profile updated']);
        else
          $response = response()->json(['data'=>[], 'error'=>1,  'error_msg'=>'some went wrong', 'message'=>'Please try again']);

    return  $response;
  }
4
  • This field looks empty: ------WebKitFormBoundaryQV7RNhEPsxqsIhSi Content-Disposition: form-data; name="file" Commented Feb 7, 2017 at 12:55
  • I also have same doubt. but why it is going empty?. flow.upload () should take care of that. Commented Feb 7, 2017 at 12:58
  • I'm not seeing any <input type="file" flow-btn /> in your upload code.... Commented Feb 7, 2017 at 13:07
  • you can see my html code. it is there on <md-button>. Commented Feb 7, 2017 at 13:10

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.