File Upload using AngularJS

ID : 10099

viewed : 12

Tags : angularjsangularjs-fileuploadangularjs

Top 5 Answer for File Upload using AngularJS

vote vote

95

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

90

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 = e.target.result;       //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

75

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);         });     }; }); 

HTML:

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

PHP:

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) https://jsfiddle.net/vince123/8d18tsey/31/

vote vote

64

Below is working example of file upload:

http://jsfiddle.net/vishalvasani/4hqVu/

In this one function called

setFiles 

From View which will update the file array in controller

or

You can check jQuery File Upload using AngularJS

http://blueimp.github.io/jQuery-File-Upload/angularjs.html

vote vote

56

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

https://github.com/flowjs/ng-flow

Check out a demo here

http://flowjs.github.io/ng-flow/

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

https://github.com/flowjs/fusty-flow.js

Top 3 video Explaining File Upload using AngularJS

Related QUESTION?