Angular file upload without local server?

Question

I'm trying to create a file upload for an Angular application. I would like users to be able to browse their local file system for a file to upload, just like you can do on any number of common websites.

I've been using angular-file-upload for client side interaction, but since it requires a specific route to access the staged files for upload, I'm not sure how to make it work with my application's setup. In development, the application is served with Grunt and proxies over to a server running a JAX-RS web service for data. In production, the application is deployed as a WAR within the same JBoss instance as the web service JAX-RS WAR. Pondering this situation, I feel like I have two options, neither of which will work:

1) Stand an express server up with Grunt that has the staging route. This won't work because I would prefer not to have an express server running in production, and I'm not sure that's even possible since the application and web service are deployed within JBoss?

2) The staging route will proxy over just like all the other routes. Obviously this won't work for uploading from the user's local hard drive!

I keep thinking that there must be another, better option that will work. I looked into how other sites allow the functionality I'd like, and found this thread explaining how the client initiates a TCP/IP connection with the server. However, I'm not sure if this is the right route to take.

Could anyone offer some insight? This is outside of my realm of experience and I would really appreciate some guidance!

Thank you in advance

Answer 1

Check this out, you can use HTML5 fileReader with $parse inside a directive you apply to a file input. In this way you're just uploading the file to your client side Angular app. Maybe this example will help.

Directive:

angular.module('core').directive('onReadFile', ['$parse',
    function($parse){
        return {
            restrict: 'A',
            scope: false, 
            link: function(scope, ele, attrs) {

                var fn = $parse(attrs.onReadFile);
                ele.on('change', function(onChangeEvent){
                    var reader = new FileReader();

                    reader.onload = function(onLoadEvent) {
                        scope.$apply(function(){
                            fn(scope, {$fileContents: onLoadEvent.target.result} )
                        })
                    }

                    reader.readAsText((onChangeEvent.srcElement || onChangeEvent.target).files[0]);
                })

            }
        }
    }
]);

Use it in the view:

<div>
    <label>Select File</label>
    <input type="file" on-read-file="parseInputFile($fileContents)">
</div>

Access the file data within controller:

$scope.parseInputFile = function(fileText){
    // do whatever you want w/ fileText...
}

You can also use fileReader for binary files (images): https://developer.mozilla.org/en-US/docs/Web/API/FileReader

At this point the file data is within your client-side Angular code, so you can send it to some endpoint within your Java app for permanent storage.

Here is the blog I learned this from: http://veamospues.wordpress.com/2014/01/27/reading-files-with-angularjs/