Support file upload

[patcito]

Right now, we have to write our own directives to make angular upload files using html5's xhr. It would be nice if angular could do that automatically when there's a file input in a form.

[pavlovt]

Yes, it would be great if it is possible.

[javierpavon2000]

+1

[ialtamirano]

+1 this would be helpful

[kamui]

+1 This would be useful to me as well.

[wintery]

+1 yes please :D

[dylanz]

+1

[alexeygolev]

+1

[TomiMikola]

+1

[jmparraguez-haulmer]

+1

[nateabele]

Great! Who wants to help write the patch?

[celmaun]

Don't we first need FormData support for $http?

[vlamic]

+1

[arselvam]

+1

[hparra]

+1

[ghost]

+1

[jgrund]

+1

Would it be a good idea to expose $XHR as a service, instead of XHR being a function scoped variable as it currently is?

That way we could add event listeners to the instance.

[jurby]

+1 thx

[esteveavi]

+1

[aozora]

+1

[rsijaya]

+1

[ajeliuc]

+1

[amelekesov]

+1

[michaelcpuckett]

+1

[cosenal]

👍

[BernhardPosselt]

👍
I really need fileupload via formdata

[sabbaticaldev]

+1

[evrijkom]

+1

[Dolmio]

+1

[jaisonjustus]

+1

[zhex]

+1

[petebacondarwin]

@paulogaspar - I am sorry that you feel this way. AngularJS is a very pluggable eco-system. Why do you need core to provide this functionality. What is stopping you from using the 3rd party libraries that we have listed already?

[jhngrant]

Even egghead.io are taking a while to think about how to tackle this one - https://egghead.uservoice.com/forums/227781-suggestions/suggestions/4860656-how-should-file-uploads-be-implemented-the-angular

I wish someone from the AngularJS team would explain how file uploads should be implemented the Angular way - at least in principle.

[petebacondarwin]

@filmaj - why not write your own directive, say fm-file-change, which will do this for your particular application?

[bettysteger]

+1 for $resource (ngResource)

[badtwin]

+1

[CWSpear]

+1

[paulogaspar]

@petebacondarwin Because file uploads are pretty common, and it seems reasonable to want to use ngResource whenever possible.

[marcalj]

I made a directive to set into ngModel the base64 string of the file, to send directly to server with the other variables in the rest of the form:

'use strict';

angular.module('app')
    .directive('uploadBase64', function (dateFilter) {
        return {
            require: 'ngModel',
            link: function (scope, element, attrs, ngModel) {
                // do nothing if no ng-model
                if (!ngModel) {
                    return;
                }

                element.on('change', function () {
                    scope.$apply(function () {
                        var files = element[0].files,
                            encoded_data = [];

                        angular.forEach(files, function (file, i) {
                            var reader = new FileReader();

                            reader.onload = function (e) {
                                encoded_data.push({
                                    name: file.name,
                                    size: file.size,
                                    type: file.type,
                                    data: e.target.result
                                });

                                if (i === (files.length -1)) {
                                    ngModel.$setViewValue(encoded_data);
                                }
                            };

                            reader.readAsDataURL(file);
                        }, this);
                    });
                });
            }
        };
    });

[candreoliveira]

@marcalj, the main problem of FileReader is: https://developer.mozilla.org/en-US/docs/Web/API/FileReader#Browser_compatibility

Take a look here: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills#file-api

However, angular needs to offer this functionality by default like a module with great compatibility.

[marcalj]

Yep, in my case my minimum version of IE is v10 :)

[danialfarid]

@petebacondarwin referring to your comment

It would be much easier to implement progress and cancel/abort functionality for https://github.com/danialfarid/angular-file-upload plugin if this issue is resolved.

[petebacondarwin]

As mentioned by @caitp this PR or some form of it will make it into 1.3. See #1934 (comment)

[nervgh]

You can also see my upload module and this.

Features of my module:

• HTML5 (formData) + Iframe upload
• the uploading queue
• drag-n-drop and <input type="file" />
• upload progress (for single file and the queue)
• filtering before adding to queue
• canceling of uploading (for single file and the queue)
• creating thumbnails on canvas for images (optional)
• write less do more =)
• ...

[kuraga]

+1

[isidroamv]

+1

[chris31389]

+1

[josh256]

+1

[demisx]

+1 Huge pain dealing with type="file" right now.

[lareb]

+1

[hledo]

Definetely agree.

[lrettig]

+1

[schokshi]

+1

[fnagel]

+1

[mohamedhafezqo]

+1

[petebacondarwin]

In 1.5.5 you can react to any of the XHR events in $http, which provides the basic core feature that you can use with $http to do your own file upload work. We are not going to implement anything more specific to support file uploads at this time.

[petebacondarwin]

Locking to prevent the the proliferation of +1s