I remember in jquery having used the library
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
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()">
<div>
<label for="up">Seleccione un fichero</label>
</div>
<div>
<input id="up" type="file" file-changed model="file">
</div>
<br>
<div>
<button type="submit" class="boton" ng-disabled="!file">Enviar</button>
</div>
</form>
</div>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.