There’s little-no documentation on angular for uploading files. A lot of solutions require custom directives other dependencies (jquery in primis… just to upload a file…). After many tries I’ve found this with just angularjs (tested on v.1.0.6) html <input type=”file” name=”file” onchange=”angular.element(this).scope().uploadFile(this.files)”/> Angularjs (1.0.6) not support ng-model on “input-file” tags so you have to do … Read more
You can add something like this: myapp.controller(“myController”,function($scope,$http){ $scope.signup = function(){ var form_data = new FormData(); angular.forEach($scope.files,function(file){ form_data.append(‘file’,file); }); form_data.append(‘susername’,$scope.susername); // new line var config = {headers: { ‘Content-type’: undefined } }; $http.post(“picupload.php”,form_data, config) .success(function(response){ alert(response); }); } I’m not sure about PHP but after googling I found that in php ‘susername’ can retrieved as below: … Read more
How to POST FormData Using the $http Service When using the FormData API to POST files and data, it is important to set the Content-Type header to undefined. var fd = new FormData() for (var i in $scope.files) { fd.append(“fileToUpload”, $scope.files[i]); } var config = {headers: {‘Content-Type’: undefined}}; var httpPromise = $http.post(url, fd, config); By … Read more
A real working solution with no other dependencies than angularjs (tested with v.1.0.6) html <input type=”file” name=”file” onchange=”angular.element(this).scope().uploadFile(this.files)”/> Angularjs (1.0.6) not support ng-model on “input-file” tags so you have to do it in a “native-way” that pass the all (eventually) selected files from the user. controller $scope.uploadFile = function(files) { var fd = new FormData(); … Read more
RECOMMENDED: POST Binary Files Directly Posting binary files with multi-part/form-data is inefficient as the base64 encoding adds an extra 33% overhead. If the server API accepts POSTs with binary data, post the file directly: function upload(url, file) { if (file.constructor.name != “File”) { throw new Error(“Not a file”); } var config = { headers: {‘Content-Type’: … Read more
Some of the answers here propose using FormData(), but unfortunately that is a browser object not available in Internet Explorer 9 and below. If you need to support those older browsers, you will need a backup strategy such as using <iframe> or Flash. There are already many Angular.js modules to perform file uploading. These two … Read more
I created a workaround with directive: .directive(“fileread”, [function () { return { scope: { fileread: “=” }, link: function (scope, element, attributes) { element.bind(“change”, function (changeEvent) { var reader = new FileReader(); reader.onload = function (loadEvent) { scope.$apply(function () { scope.fileread = loadEvent.target.result; }); } reader.readAsDataURL(changeEvent.target.files[0]); }); } } }]); And the input tag becomes: … Read more