This code snippet illustrates how you can upload a file preferably an image from angularjs frontend to slim php server

1. Write a simple form for the user to upload filE
Take note of file-model directive that assists us to upload the image


<form>
   <input type="file" class="form-control" file-model="myFile" required>
  <button class="submit btn btn-danger" type="submit" ng-click="uploadFile()"> Create  </button>
 At the controller add the function that process the click event
 $scope.uploadFile = function()
   {
          //ASSIGN THE FILE SCOPE OBJECT TO FILE
               var file = $scope.myFile;
      //Create object that contains the parameters needed by the server         
      var data={user_id:$stateParams.user_id,img:file};

//ANgularJS FACTORY that posts data to the server
             
  Data('/uploader').postImage(data,
               function(response)
               {
                 if(response.status=="error")
                 {
                    $rootScope.msg=response.msg;;
                 
                 }else
                 { 
                    $rootScope.msg=response.msg;;
                 }
                }
            );
    }

This is the angularjs directive that process  the file.You dont have to change anything here

app.directive('fileModel', ['$parse', function ($parse) {
            return {
               restrict: 'A',
               link: function(scope, element, attrs) {
                  var model = $parse(attrs.fileModel);
                  var modelSetter = model.assign;
                  element.bind('change', function(){
                     scope.$apply(function(){
                        modelSetter(scope, element[0].files[0]);
                     });
                  });
               }
            };
         }]);

Angularjs factory that allows us to send data to the server. Make sure you specify the headers as i have set and don’t forget the transform request otherwise it wont work..

app.factory("Data",['$resource','$localStorage',
    '$sessionStorage',
function($resource,$localStorage,
    $sessionStorage)
{
    var serviceBase="http://mycoolwebsite.com/user_image.php";
    return function(link)
    {
        return $resource(serviceBase+link,{},{
         
            postImage:{method:'POST',
                    transformRequest: formDataObject,
                headers: {'Content-Type':undefined, enctype:'multipart/form-data'}
        },
            two_query:{
                url:serviceBase+link,
                method:'GET',isArray:false,
                params:{
                    company_code:'@company_code',
                      event_code:'@event_code'
                        }
                       }
        });
                function formDataObject (data) {
            var fd = new FormData();
            angular.forEach(data, function(value, key) {
                fd.append(key, value);
            });
            return fd;
        }
    }
}
]);
$app->post('/uploader',function()use($user,$app)
{
    //$user-This is a class that has pdo statements for interacting with the database
       $var = $app->request->getBody();
       $myvar1=json_decode($var,true);
       $user_id=$_POST['user_id'];
       print_r($_FILES['img']['name']);

        do check for image types here and imprve security.You could restrict to only png/jpg/gif file formats only.Depending on what you need. 

       if(!isset($_FILES['img']['name']))
       {
                $error['status']="error";
             $error['msg']="Encountered an error: while uploading.no FILE UPLOADED";
             echo json_encode($error);
       }
       else
       {
           $imgs=array();
           if($_FILES['img']['error']==0)
           {
               $name=uniqid('img-'.date('Ymd').'-');
               if(move_uploaded_file($_FILES['img']['tmp_name'],'posters/'.$name)==true)
               {
                   $old_neem=$_FILES['img']['name'];
//make sure you have a folder called uploads where this php file is
                   $imgs[]=array('url' => '/uploads/' . $name, 'name' =>$old_neem);
                   $post_success=//insert $name into database here
                   if($post_success)
                   {
                        $error['status']="success";
                     $error['msg']="Image updated successfully";
                     echo json_encode($error);
                   }
                   else{
                   $error['status']="error";
                $error['msg']="Encountered an error: while uploading.no FILE UPLOADED";
                echo json_encode($error);
            }
               }
           }
       }
});

Do display the image.Just call the api and  display it as follows

<img ng-src="pathtodirectory/{{myimagename}}"> 
SHARE
Previous articleInstall Zsh on Linux and Configure
Next articleHow to manually add menu entry to GRUB2 menu on Arch Linux
I'm a fan of Linux and open source enthusiast with bachelor's degree in Electrical and Communications Engineering.The Swiss Army Knife syndrome makes me an expert in the fields of Virtualization, Cloud Computing,VoIP,Linux Containers and Server Hardening. Currently i have the following certifications: 1. LPI 2. SUSE Certified Linux Administrator ( CLA) 3. SUSE Certified Linux Professional ( CLP) 4. CCNA And working on RHCSA, RHCE, RHCVA, and Openstack Cloud Certification. I have a strong desire to learn, develop, and share knowledge with others.