angular – Jake Litwicki

Random

Planning Your Technology Stack

Architecting an application and deciding on the key components of the technology stack that go into building it is an important task. If software hadn’t worked out as a career, my backup was construction. There are many similarities – from crafting the blueprints to laying the foundation, from choosing your Read more…

By Jake Litwicki, 2 years2 years ago

Random

Angular + Symfony file upload with AWS S3

First, using the fantastic work of Jenny Louthan of Uncorked Studios, implement this directive:

Directives.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]);
      });
    });
  }
};
}]);

Directives.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]);

});

}

};

}]);

Secondly, write the Angular function to handle the upload:

$scope.uploadImage = function (image, event) {

  var url = '/path/to/upload';
  var formData = new FormData();
  formData.append('image', image);

  $http.post(url, formData, {
    transformRequest: angular.identity,
    headers: { 'Content-Type': undefined }
  })
  .success(function(data) {
    //@TODO: something unique here to properly display a success message.
  })
  .error(function(data) {
    //@TODO: something unique here for an error message
    alert(data.message);
  });

};

$scope.uploadImage = function (image, event) {

var url = '/path/to/upload';

var formData = new FormData();

formData.append('image', image);

$http.post(url, formData, {

transformRequest: angular.identity,

headers: { 'Content-Type': undefined }

})

.success(function(data) {

//@TODO: something unique here to properly display a success message.

})

.error(function(data) {

//@TODO: something unique here for an error message

alert(data.message);

});

};

Third, write the action in Symfony to process the file upload, with the proper route: path/to/routes.yml

image_upload_route:
    path: /path/to/upload
    defaults: { _controller: Path\To\Controller:imageUpload }

image_upload_route:

path: /path/to/upload

defaults: { _controller: Path\To\Controller:imageUpload }

path/to/MyController.php

public function imageUploadAction(Request $request)
{
    try {

        $image = $request->files->get('image');

        if(!$image instanceof UploadedFile) {
            throw new InvalidFormException(sprintf('Image must be of type UploadedFile, %s given.', get_class($image)));
        }

        //$image is now an instance of Symfony\Component\HttpFoundation\File\UploadedFile

        //@TODO: process your image here.

        $responseData = array(
          'message' => '',
        );

        $response = new Response($responseData);
        $response->headers->set('Content-Type', 'application/json');
        return $response;

    }
    catch(\Exception $e) {
        throw $e;
    }
}

public function imageUploadAction(Request $request)

{

try {

$image = $request->files->get('image');

if(!$image instanceof UploadedFile) {

throw new InvalidFormException(sprintf('Image must be of type UploadedFile, %s given.', get_class($image)));

}

//$image is now an instance of Symfony\Component\HttpFoundation\File\UploadedFile

//@TODO: process your image here.

$responseData = array(

'message' => '',

);

$response = new Response($responseData);

$response->headers->set('Content-Type', 'application/json');

return $response;

}

catch(\Exception $e) {

throw $e;

}

Now, referencing my previous post on setting up Liip + Read more…

By Jake Litwicki, 3 years3 years ago

Random

Custom angular smart-table pagination template

Short and sweet. Implemented smart-table on a new project, and needed to customize the pagination template. This is simply an override of the default found in smart-table.js

ng.module('smart-table', []).run(['$templateCache', function ($templateCache) {
 $templateCache.put('template/smart-table/pagination.html',
 '<nav ng-if="numPages && pages.length >= 2"><ul class="pagination">' +
 '<li ng-class=""><a ng-click="selectPage(1)">First</a></li>' +
 '<li ng-class=""><a ng-click="selectPage(currentPage-1)"><i class="fa fa-fw fa-angle-double-left"></i></a></li>' +
 '<li ng-repeat="page in pages" ng-class="{active: page==currentPage}"><a ng-click="selectPage(page)">{{page}}</a></li>' +
 '<li ng-class=""><a ng-click="selectPage(currentPage+1)"><i class="fa fa-fw fa-angle-double-right"></i></a></li>' +
 '<li ng-class=""><a ng-click="selectPage(numPages)">Last</a></li>' +
 '</ul></nav>');
}]);

ng.module('smart-table', []).run(['$templateCache', function ($templateCache) {

$templateCache.put('template/smart-table/pagination.html',

'<nav ng-if="numPages && pages.length >= 2"><ul class="pagination">' +

'<li ng-class=""><a ng-click="selectPage(1)">First</a></li>' +

'<li ng-class=""><a ng-click="selectPage(currentPage-1)"><i class="fa fa-fw fa-angle-double-left"></i></a></li>' +

'<li ng-repeat="page in pages" ng-class="{active: page==currentPage}"><a ng-click="selectPage(page)">{{page}}</a></li>' +

'<li ng-class=""><a ng-click="selectPage(currentPage+1)"><i class="fa fa-fw fa-angle-double-right"></i></a></li>' +

'<li ng-class=""><a ng-click="selectPage(numPages)">Last</a></li>' +

'</ul></nav>');

}]);

By Jake Litwicki, 3 years3 years ago