Upload files with angularjs in nginx


I want to upload a file in using post multipart , on the server side I use as a load balancer connected to several application servers and I do not know if doing this sends the different parts of the file to different application servers.

asked by Ty Viera 02.02.2016 в 16:34

2 answers


I remember in jquery having used the library

jQuery File Upload Angular

jQuery File Upload Plugin - AngularJS Fork

but also has implementation for Angular , as you see there is a directive that you could use.

Check the documentation because it mentions Nginx

Documentation Overview

answered by 02.02.2016 / 16:51

The recommended option is to use a plugin



You can also use the $http module to make your request using FormData with the small inconvenience that you will not be able to support old browsers eg: IE 8 and 9. The plugins mentioned above have a support for uploading those browsers as well as a lot of additional functionality, so I recommend them.

Here is an example of how to do it using the $http module

angular.module('app', [])
  .controller('FileUploadController', ['$scope', '$http',
    function($scope, $http) {
      $scope.file = '';

      $scope.sendFile = function() {
        $http.post('/api/myurl', $scope.file, {
          headers: {
            'Content-Type': undefined

  .directive('fileChanged', function() {
    return {
      restrict: 'A',
      scope: {
        model: '=',
        prop: '@'
      link: function(scope, element) {
        function changeEvt(evt) {
          var fd = new FormData();
          fd.append(scope.prop || 'myFile', evt.target.files[0]);
          scope.$apply(function() {
            scope.model = fd;


        element.on('change', changeEvt);

        scope.$on('$destroy', function() {
          element.off('change', changeEvt);
.boton {
  border-radius: 6px;
  padding: 10px;
  border: solid 1px gray;
  color: white;
  background-color: #337AB7;
.boton:disabled {
  background-color: lightslategray;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="FileUploadController">
  <form ng-submit="sendFile()">
      <label for="up">Seleccione un fichero</label>
      <input id="up" type="file" file-changed model="file">
      <button type="submit" class="boton" ng-disabled="!file">Enviar</button>

This is the pure "angular" form of sending a file.

If you notice, I had to use a directive because angular does not support input type file with ng-model so a directive is the way to capture the file that is entered in the input and bindearlo to your $scope I take advantage and instead of bindear the content of the file I put the object FormData ready to send, since FormData allows you to add objects File directly but this is only one of the examples of how to do it; Obviously a plugin can give you many more options.

answered by 03.02.2016 в 16:57