angularjs-fileupload

How to make POST requests with the FormData API

by

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

AngularJS Upload Multiple Files with FormData API

by

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

AngularJS: how to implement a simple file upload with multipart form?

by

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

How to POST binary files with AngularJS (with upload DEMO)

by

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

File Upload using AngularJS

by

This is the modern browser way, without 3rd party libraries. Works on all the latest browsers. app.directive(‘myDirective’, function (httpPostFactory) { return { restrict: ‘A’, scope: true, link: function (scope, element, attr) { element.bind(‘change’, function () { var formData = new FormData(); formData.append(‘file’, element[0].files[0]); httpPostFactory(‘upload_image.php’, formData, function (callback) { // recieve image name to use in … Read more

ng-model for “ (with directive DEMO)

by

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

tech