Image not uploaded from angular to Laravel

Question

I created a form to save the details of parts with an image. I am using laravel 5.1 and angularJS. Information about the elements will be saved successfully, but the image will not be uploaded to the server, as well as image details not stored in the database. I need help loading an image in laravel using angularjs

Its my html code:

    <div ng-controller="itemController">
<form ng-submit="addItem()">
    <label>Name:</label><input type="text" name="name" value="" ng-model="newitem.name" placeholder="Item Name">
    <label>Model No:</label><input type="text" name="model" value="" ng-model="newitem.model" placeholder="Model Number">
    <label>Size:</label><input type="text" name="size" value="" ng-model="newitem.size" placeholder="Item Size">
    <label>Colour:</label><input type="text" name="color" value="" ng-model="newitem.color" placeholder="Item Colour">
    <br>
    <label>Description:</label><textarea cols="30" rows="5" ng-model="newitem.description" placeholder="Description"></textarea>
    <br>
    <label>Photo:</label><input type="file"  accept="imag/works" ngf-select="" ngf-multiple="true"  class="form-control" id="img" name="img" placeholder="Image" ng-model="newitem.photo" multiple>
    <br>
    <button type="submit">Save</button>
</form>
<div ng-show="sendmessage">
    Item Saved Successfully...........
</div>

<div>

AngularJs Code:

app.controller('itemController',function($scope,$http,Item) {
$scope.items=[];
$scope.newitem={};
$scope.curitem = {};
$scope.sendmessage=false;

loadData();

//To Send Message to Site Admin..................

$scope.addItem=function(){
    if($scope.curitem.id){
        //TODO error display
        $scope.newitem.$update(function () {
            angular.extend($scope.curitem,$scope.curitem, $scope.newitem);
            $scope.sendmessage=true;
        });
    }else{
        $scope.newitem.$save(function (item) {
            //TODO error display
            $scope.items.push(item);
            $scope.sendmessage=true;
        });
    }
    //$scope.sendmessage=true;
    $scope.curitem = {};
    $scope.newitem = {};
    $scope.newitem=new Item();
    loadData();
};



function loadData(){
    var items =Item.query(function () {
        $scope.items = items;
        $scope.newitem=new Item();
    });
}
});


angular.module('ItemService',[]).factory('Item',['$resource',
function($resource){
    return $resource('/api/items/:itemId',{
        itemId:'@id'
    },{
        update:{
            method:'PUT'
        }
    });
}
]);

ItemController.php is given below ...

        <?php

        namespace App\Http\Controllers\Auth;

        use App\File;
        use App\Item;
        use Illuminate\Http\Request as Request;
        use App\Http\Requests;
        use App\Http\Controllers\Controller;
        use Illuminate\Http\Response;
        use Validator;
        use Input;

       class ItemController extends Controller
       {
              /**
             * Validates given data for account
 * @param array $data
 * @return Validator
 */

protected function validator(array $data)
{
    // Loan account is not validated

    return Validator::make($data,[
        'name'  => 'required',
        'size'   => 'required|max:255'
    ]);

}


/**
 * Store a newly created resource in storage.
 *
 * @param  \Illuminate\Http\Request  $request
 * @return \Illuminate\Http\Response
 */
public function store(Request $request)
{
    $validator = $this->validator($request->all());
    if($validator->fails()){
        return Response::json( $validator->errors()
            ,400);
    }
    $item=new Item($request->all());
    if($item->save())
    {
        $id=$item->id;
        if ($request->hasFile('photo')) {
            $file = $request->file('photo');
            $image=new File();
            $image->name = $this->uploadImage($file);
            $image->file_id=$id;
            $image->save();
        }
    }

    return Response::json(['error' => 'Server is down']
        ,500);
}


/**
 * To Strore Images
 *
 *
 */

public  function uploadImage($file){

        $storedFileName="";
        if(!empty($file)){

            $extension=$file->getClientOriginalExtension();
            $fileName = rand(11111,99999).'.'.$extension;
            $storedFileName=base_path().'/img/works/'. $fileName;
            $file->move(
                base_path().'/img/works/', $fileName
            );
        }
    return $storedFileName;
}


}

Answer 1

AngularJS . , nervgh/angular-file-upload ( ), . egghead