File Upload using AngularJS

ID : 10099

viewed : 12

Tags : angularjsangularjs-fileuploadangularjs

Top 5 Answer for File Upload using AngularJS

vote vote


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 have explicit support for older browsers:

And some other options:

One of these should fit your project, or may give you some insight into how to code it yourself.

vote vote


The easiest is to use HTML5 API, namely FileReader

HTML is pretty straightforward:

<input type="file" id="file" name="file"/> <button ng-click="add()">Add</button> 

In your controller define 'add' method:

$scope.add = function() {     var f = document.getElementById('file').files[0],         r = new FileReader();      r.onloadend = function(e) {       var data =;       //send your binary data via $http or $resource or do anything else with it     }      r.readAsBinaryString(f); } 

Browser Compatibility

Desktop Browsers

Edge 12, Firefox(Gecko) 3.6(1.9.2), Chrome 7, Opera* 12.02, Safari 6.0.2

Mobile Browsers

Firefox(Gecko) 32, Chrome 3, Opera* 11.5, Safari 6.1

Note : readAsBinaryString() method is deprecated and readAsArrayBuffer() should be used instead.

vote vote


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 a ng-src                      console.log(callback);                 });             });          }     }; });  app.factory('httpPostFactory', function ($http) {     return function (file, data, callback) {         $http({             url: file,             method: "POST",             data: data,             headers: {'Content-Type': undefined}         }).success(function (response) {             callback(response);         });     }; }); 


<input data-my-Directive type="file" name="file"> 


if (isset($_FILES['file']) && $_FILES['file']['error'] == 0) {  // uploads image in the folder images     $temp = explode(".", $_FILES["file"]["name"]);     $newfilename = substr(md5(time()), 0, 10) . '.' . end($temp);     move_uploaded_file($_FILES['file']['tmp_name'], 'images/' . $newfilename);  // give callback to your angular code with the image src name     echo json_encode($newfilename); } 

js fiddle (only front-end)

vote vote


Below is working example of file upload:

In this one function called


From View which will update the file array in controller


You can check jQuery File Upload using AngularJS

vote vote


You can achieve nice file and folder upload using flow.js.

Check out a demo here

It doesn't support IE7, IE8, IE9, so you'll eventually have to use a compatibility layer

Top 3 video Explaining File Upload using AngularJS