Workflow

After the user selects a file it will should be automatically upload the image. Instead of submitting the form, i called the http post method directly after the user selects a file. The problem is i guess the Request Content Type is plain text thus i am getting a null value when im retrieving the input file.

Error

ErrorException in Agency.php line 143:
Argument 1 passed to App\Agency::processImage() must be an instance of Symfony\Component\HttpFoundation\File\UploadedFile, null given, called in /home/vagrant/Project/Travelo/app/Http/Controllers/AgencyController.php on line 198 and defined

Network

Response Headers

HTTP/1.1 500 Internal Server Error
Server: nginx/1.8.0
Content-Type: text/html; charset=UTF-8
Transfer-Encoding: chunked
Connection: keep-alive
Cache-Control: no-cache, private
date: Thu, 27 Aug 2015 08:15:27 GMT

Request Headers

POST /api/profile/picture HTTP/1.1
Host: agency.domain.dev
Connection: keep-alive
Content-Length: 113
Origin: http://agency.domain.dev
X-CSRF-TOKEN: WsxG0SjSeFt6BIljsM9Hgi7tjmWV9ONhD9TWtA1D
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.157 Safari/537.36
Content-Type: application/json;charset=UTF-8
Accept: application/json, text/plain, */*
X-Requested-With: XMLHttpRequest
Referer: http://agency.domain.dev/profile
Accept-Encoding: gzip, deflate
Accept-Language: en
Cookie: XSRF-TOKEN=eyJpdiI6Ik13czZpT09Sc28wOEZadWVvUXN4RXc9PSIsInZhbHVlIjoidHd4NE9Ed0lPdkZmYWpVQXg3WXREckROam9RR2ljUW1LN01JVGkwZXJsWDlxVGVDdVZEbXhlWTF3RHpvd00wcERqZEFSNVlFQjZRaXlBTmlzSnFaWnc9PSIsIm1hYyI6IjMxNjVhOTc4NTE5MjBhYzVjYjBiYzk2MTMxZTIxMzdlMDRjZDE3MWQ0NzNhYTg0ZjgzYjMxOTM4OTI0NDFkZWUifQ%3D%3D; laravel_session=eyJpdiI6IlwvZ09udkxGQ0lrdTd5aVpvZXF6eGp3PT0iLCJ2YWx1ZSI6IlNRQ1VNTXozeWRvc3lUZmZtRDY1T2UzTk1BbXhKTGtPQ0dYazlkV2RYV29XeXNXaXc5b05UbnFFdlJnQlB2OStKTXduSExQTVd1WlwvbUh5SUlJNFVmdz09IiwibWFjIjoiNjkwN2YxMDRkMzRhNDAzZjU3YzZhYjVjMjJlYzkwMmRhMWNlYzFjZmUwODcyY2E2NDU0NjdjMGYyNmU3OWYwZSJ9

Request Payload

{"picture":"C:\\fakepath\\justice-for-pamana-inline-fb-profile-20150821-02_CDF5948064614009AC3C73C05478703F.jpg"}

View

<form method="POST" v-on="submit: updateProfilePic" enctype="multipart/form-data">
    <input type="file" name="profilePicture" id="profile-picture" v-model="profilePicture.picture">
    <button type="button" id="btn-profile-picture" class="btn btn-sm btn-outline btn-white"> Update Picture </button>
 </form>

Controller

 public function editProfilePicture(Request $request) {

        $this->agency->profile_picture = $this->agency->processImage($request->file('picture'));

        $this->agency->save();

    }

Process Image Method

public static function processImage(UploadedFile $photo) {

        $photo_name =  Str::random(8) .  '.' . $photo->getClientOriginalExtension();

        Image::make($photo)->fit(128)->save($this->path.$photo_name);

        return $photo_name;
    }

Vue

watch : {
        profilePicture: function () {
            this.updateProfilePic();
        }
    },

methods: {
    updateProfilePic: function() {
        var picture = this.profilePicture;

        this.$http.post('api/profile/picture', picture, function() {
            //Do Something
            });
        }
}

I guess the root problem is the Content Type. Any suggestions or tips on how to resolve the issue? Thank you! :)