File upload from AngularJS to Laravel

Question

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.

your formData object won't contain the file, just a name value. Read up on uploading files with ajax — charlietfl
– charlietfl, Commented Sep 14, 2014 at 17:17
Noticing that you create 3 derivatives of the original image file upon every save. Another way of handling this same issue is to create a URL path structure that allows you to request a processed image on demand. The benefit of doing it this way is that the user that is saving the image the first time won't have to wait for 4 files to be saved. Instead, the first person who requests a particular image derivative will only have to wait extra if they are the first person to request it. Instructions here: image.intervention.io/use/url — Sean Adams-Hiett
– Sean Adams-Hiett, Commented Mar 27, 2016 at 4:50

Joynal · Accepted Answer · 2015-04-09 16:20:30Z

1

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

answered Apr 9, 2015 at 16:20

Joynal

199 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

RobbieP · Accepted Answer · 2014-09-14 16:30:11Z

0

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

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

and this line:

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

answered Sep 14, 2014 at 16:30

RobbieP

6984 silver badges13 bronze badges

2 Comments

RobbieP Over a year ago

There's a problem with the form submitting/uploading then

RobbieP Over a year ago

Have a look at @charlietfl comment. You need to look at uploading files with ajax

Collectives™ on Stack Overflow

File upload from AngularJS to Laravel

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related