CODEWITHSUNDEEP
javascriptphpjqueryhtmlangularjs
User183849481
User183849481

Reputation: 211

File upload from AngularJS to Laravel

I've been busting my head on this for two days. I can't seem to get a simple form with a file upload to work. Below you can see the controller I have for this page in my webapp.

myExampleApp.controller('ProfileSettingsController', ['$scope', '$window', '$http', function ($scope, $window, $http) {

    $scope.master = {};

    $scope.update = function(formData) {
        $scope.master = angular.copy(formData);

        $http({
            method  : 'POST',
            url     : '/photos',
            data    : $.param($scope.formData)
        })
        .success(function(data) {

            console.log(data);

            var response = data.split("-");

            if (response[0] == 'Success') {

                $scope.successMessage = response[1];
                $scope.showSuccessAlert = true;

            } else {

                $scope.failMessage = response[1];
                $scope.showFailAlert = true;

            }

        });

    };

}]);

And this is the view belonging to it:

<h1>Change your photo here:</h1>

<div ng-controller="ProfileSettingsController">

    <div class="alert alert-success" ng-show="showSuccessAlert">{{ successMessage }}</div>
    <div class="alert alert-fail" ng-show="showFailAlert">{{ failMessage }}</div>

    <form>

        <label for="image">Image:</label>
        <input type="file" ng-model="formData.image" name="image"/>

        <div class="form-group">
            <button class="btn btn-primary" ng-click="update(formData)">Save</button>
        </div>

    </form>

</div>

This posts to /photos on this route Route::resource('photos', 'PhotosController'); which looks like this:

<?php

class PhotosController extends BaseController {

    public function store() {

        $input = Input::get('image');

        $fileName = $input->getClientOriginalName();

        $fileName = str_replace(" " , "_" , $fileName);

        $image = Image::make($input['image']->getRealPath());

        File::exists(public_path()) or File::makeDirectory(user_photos_path());

        $image->save(user_photos_path().$fileName);
        $width = $image->width();
        $height = $image->height();

        $measure = ($width > $height) ? $height : $width;

        $image->crop($measure, $measure);
        $image->save(user_photos_path().'large-'.$fileName);
        $image->resize(200, 200);
        $image->save(user_photos_path().'tn-'.$fileName);
        $image->blur(15);
        $image->save(user_photos_path().'blur-'.$fileName);

        Photos::firstOrCreate(array('userid' => Auth::id()));

        $lawly = Photos::where('userid', '=', Auth::id())->first();

        // change the attribute
        $lawly->fileName = 'large-'.$fileName;
        $lawly->thumbnailName = 'tn-'.$fileName;
        $lawly->title = Auth::user()->username;

        // save to our database
        $lawly->save();

        echo "Success-Your profile picture has been changed.";

    }

    public function create() {

        echo "wrong route";

    }

}

But it throws 500 error all the time. However, if I remove $fileName = $input->getClientOriginalName(); from the PHP controller, it doesn't, so that must be where the error is.

Upvotes: 2

Views: 5292

Answers (2)

Joynal
Joynal

Reputation: 19

If you want to upload some thing add "enctype = multipart/form-data" in your form.

Upvotes: 1

RobbieP
RobbieP

Reputation: 698

Assuming the file is uploading properly. Try changing this line to:

 $input = Input::file('image');

and this line: 

 $image = Image::make($input);

Upvotes: 0

Related Questions