support input[type=file] binding

[guruward]

hi trying to do a simple file upload :) but the input of type=file dont seem to bind ive tried hg-model-instant but get nothing, even upgraded to 1.0.2 and nothing

[coli]

There is no default binding provided by angular to input type=file.

But then, file input is real-only to javascript, the only benefit such a binding could help is on clearing the fileinput. (Angular also doesn't provide framework support to ajax upload of file right now I believe)

[lgersman]

@coli : thats not the whole truth.

It would make sense to be able to catch the onchange event on input[file].

At https://github.com/lgersman/jquery.orangevolt-ampere we have exactly that scenario : file uploads via XMLHTTPRequest V2.
Therefore we implemented our own directive to catch input[file] change events to get fileuploads done without page reloading.

I would love to see that feature in angularjs !

[jgoldber]

Has there been any progress made with binding to an input of type file? I have been searching for a solution and can't seem to find one that works...

[guruward]

my solution was just Ajax instead of request or http.post

Sent from my iPad

On Mar 1, 2013, at 7:16 PM, "jgoldber" <notifications@github.commailto:notifications@github.com> wrote:

Has there been any progress made with binding to an input of type file? I have been searching for a solution and can't seem to find one.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/1375#issuecomment-14321221.

[jgoldber]

Best solution I found: http://jsfiddle.net/marcenuc/ADukg/49/. Please share if you come across a better solution.

[Siyfion]

Yeah, this really needs looking at; being able to select & upload a file is fairly crucial to most web applications, so supporting this input is a pretty obvious missing feature.

[andrewrk]

Bump. This needs to be added to a milestone.

[aravinda0]

Another shout out in support of this.

[glebm]

ng-model file could set value to a file from HTML5 File API, there are Flash and Silverlight polyfills for IE8/IE9

[coli]

Yeah, either set the value to the file or to the input element (containing reference to the file)

[bjconlan]

This solution depends on filereader being implemented:

...
.directive('file', function() {
    return {
        restrict: 'E',
        template: '<input type="file" />',
        replace: true,
        require: 'ngModel',
        link: function(scope, element, attr, ctrl) {
            var listener = function() {
                scope.$apply(function() {
                    attr.multiple ? ctrl.$setViewValue(element[0].files) : ctrl.$setViewValue(element[0].files[0]);
                });
            }
            element.bind('change', listener);
        }
    }
});

<file name="image" ng-model="inputFile" accept="image/png,image/jpg,image/jpeg" />

You then have to do some xhr stuff yourself but I believe that this is outside the gui binding and more processing logic.

and if you lack imagination:

var file = $scope.inputFile;
$http.put('http://localhost:5984/demo/d06917e8d1fae1ae162ea7773c003f0b/' + file.name + '?rev=4-c10029f35a5c5ed9bd8cc31bf8589d3c', file, { headers: { 'Content-Type' : file.type } });

This works because of xhr2 (http://www.html5rocks.com/en/tutorials/file/xhr2) and please excuse the long example upload url, its a couchdb document endpoint (attachment).