current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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

share|improve this question
    
Your problem has more to do with Grunt than it has to angularJS, use a proper framework like express and you'll have all the doc you need about where the uploaded files are copied.(likely in your system temp folder by default) . –  mpm Sep 4 '14 at 0:06
    
Thanks - I assumed that was the case. However, due to the way the application is served in production vs deployment, standing up an Express server really isn't a good option. I'm interested in how sites like Facebook are able to allow users to upload files from their local machines since they obviously don't have a server running locally for that purpose. –  mmmyers Sep 4 '14 at 15:48

1 Answer 1

up vote 0 down vote accepted

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/

share|improve this answer
    
Thank you very much! I knew there had to be a way to do this. –  mmmyers Sep 17 '14 at 23:20
    
You're very welcome, glad it helped –  aarosil Sep 18 '14 at 0:05

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.