javascript - Laravel and Angular js file upload -

how can save images laravel , angular js ? more inputs , work me , of type text

my index:

<div class="container" ng-app="todoapp" ng-controller="todocontroller"> <h1>profile</h1> <div class="row">     <div class="col-sm-4">         <div class="form-group">             <h4>foto de perfil: </h4>             <div class="input-group">                 <span class="input-group-btn">                     <span class="btn btn-primary btn-file">                         browse&hellip;  <input type='file' name="photo" ng-model="todo.photo" class="image-upload"required/>                     </span>                 </span>                 <input type="text" class="form-control" readonly>             </div>         </div>      <div class="col-sm-6">         <div class="form-group">             <label for="">nombre del bar: </label>             <input type='text' ng-model="todo.name" class="form-control" required/>         </div>         <button class="btn btn-primary btn-block"  ng-click="addtodo()">guardar</button>         <i ng-show="loading" class="fa fa-spinner fa-spin"></i>     </div> </div> 

my route:

route::get('admin/bar', 'barscontroller@index'); route::resource('/bar', 'barcontroller'); 

my model:

namespace app; use cviebrock\eloquentsluggable\sluggableinterface; use cviebrock\eloquentsluggable\sluggabletrait; use illuminate\support\facades\input; use illuminate\database\eloquent\model;   class bar extends model  {    protected $fillable = array('name','photo', 'cover',     'description',  'phone', 'email','direction', );   public function setphotoattribute($photo)  {    $file = array('image' => input::file('photo'));    $destinationpath = 'images/bar/profile';    $extension = input::file('photo')->getclientoriginalextension();    $filename = rand(11111,99999).'.'.$extension;    $this->attributes['photo'] = $filename;    input::file('photo')->move($destinationpath, $filename);   } 

barscontroller:

public function index() {     return view ('bar.index'); } 

barcontroller: public function store() {

    $todo = \auth::user()->bars()->create(request::all());     return $todo; } 

app.js ( angular js ):

var app = angular.module('todoapp', function($interpolateprovider) {     $interpolateprovider.startsymbol('<%');     $interpolateprovider.endsymbol('%>'); }); // todo controller ,...  app.controller('todocontroller', function($scope, $http) {     $scope.todos = [];     $scope.loading = false;      $scope.init = function() {         $scope.loading = true;         $http.get('/bar').         success(function(data, status, headers, config) {             $scope.todos = data;                 $scope.loading = false;           });     }      $scope.addtodo = function() {      $scope.loading = true;      $http.post('/bar', {                 name: $scope.todo.name,             description: $scope.todo.description,             phone: $scope.todo.phone,             email: $scope.todo.email,             direction: $scope.todo.direction,             photo: $scope.todo.photo,             cover: $scope.todo.cover          }).success(function(data, status, headers, config) {             $scope.todos.push(data);             $scope.todo = '';             $scope.loading = false;         });     };      $scope.updatetodo = function(todo) {         $scope.loading = true;          $http.put('/bar' + todo.id, {             title: todo.title,             done: todo.done         }).success(function(data, status, headers, config) {             todo = data;                 $scope.loading = false;          });;     };      $scope.deletetodo = function(index) {          $scope.loading = true;          var todo = $scope.todos[index];          $http.delete('/bar' + todo.id)             .success(function() {                 $scope.todos.splice(index, 1);                     $scope.loading = false;              });;     };       $scope.init();  }); 

i using below code upload image try this, hope works too.

<-- front end file input -->

<input type="file" name="file" onchange="angular.element(this).scope().uploadavtar(this.files)"/> 

<-- angular controller's file -->

$scope.uploadavtar = function(files) {   var fd = new formdata();   //take first selected file   fd.append("file", files[0]);    $http.post("/uploadavtar", fd, {       withcredentials: true,       headers: {'content-type': undefined },       transformrequest: angular.identity   }).then(function successcallback(response) {     alert(response);     // callback called asynchronously     // when response available   }, function errorcallback(response) {     alert(response);     // called asynchronously if error occurs     // or server returns response error status.   }); } 

<-- in route file -->

route::post('/uploadavtar', 'userscontroller@uploadavtar'); 

<-- in userscontroller -->

public function uploadavtar(request $request){ $user = jwtauth::parsetoken()->authenticate(); $user_id = $user->id; $user_name = $user->first_name." ".$user->last_name;  $file = array('image' => input::file('file')); // setting rules $rules = array('image' => 'required',); //mimes:jpeg,bmp,png , max size max:10000 // doing validation, passing post data, rules , messages $validator = validator::make($file, $rules); if ($validator->fails()) {   // send page input data , errors   return "validation failed"; }else {     // checking file valid.     if (input::file('file')->isvalid()) {       $destinationpath = 'assets/img'; // upload path       $extension = input::file('file')->getclientoriginalextension(); // getting image extension       $filename = rand(11111,99999).'.'.$extension; // renameing image       input::file('file')->move($destinationpath, $user_name."_$user_id".".jpeg"); // uploading file given path       // sending message       return 'upload successfully';     }     else {       // sending error message.       return 'uploaded file not valid';     } } }