File Upload using AngularJS

Question

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:

• https://github.com/leon/angular-upload - uses iframes as a fallback
• https://github.com/danialfarid/ng-file-upload - uses FileAPI/Flash as a fallback

And some other options:

• https://github.com/nervgh/angular-file-upload/
• https://github.com/uor/angular-file
• https://github.com/twilson63/ngUpload
• https://github.com/uploadcare/angular-uploadcare

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

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.

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/

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

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

Use the onchange event to pass the input file element to your function.

<input type="file" onchange="angular.element(this).scope().fileSelected(this)" />

So when a user selects a file, you have a reference to it without the user needing to click an "Add" or "Upload" button.

$scope.fileSelected = function (element) {
    var myFileSelected = element.files[0];
};