title: File upload in Grails application using angular js
body: <p>I'm working on a Grails (2.3.7) application with AngularJS. I've to upload files in my application. Since the front end is managed by Angular , I'm uploading my file from Angular controller.  I've gone through <a href="https://www.npmjs.com/package/angular-file-upload" rel="nofollow noreferrer">This</a> 
  and <a href="https://stackoverflow.com/questions/22639672/file-upload-using-angular-js-and-grails">this</a> discussions , and tried to upload as follows. </p>
  
  <p>My file uploader is</p>
  
  <pre><code>&lt;input type="file" ng-file-select="onFileSelect($files)"&gt;
  </code></pre>
  
  <p>Angular controller is </p>
  
  <pre><code>myapp.controller('createWebController',['$scope','$http','$upload',function($scope,$http,$upload){
  
         $scope.onFileSelect = function($files) {
  
                                                                 var file = $files[0];
                                                                 console.log(file)
                                                           $upload.upload({
                                                               url: 'UploadLogo/upload', //upload.php script, node.js route, or servlet url
  
                                                               file: file,
                                                               method: 'POST' ,
                                                               fileFormDataName: "myFile",
  
                                                           }).progress(function(evt) {
                                                               console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
                                                           }).success(function(data, status, headers, config) {
                                                               // file is uploaded successfully
                                                               console.log(data);
                                                            })
                                                                    .error(function(data){ console.log(data)})
                                                             ;
  
         }; 
  </code></pre>
  
  <p>}])</p>
  
  <p>on the server , I'm using <a href="https://github.com/cavneb/FileUploader/blob/master/grails-app/services/berry/FileUploadService.groovy" rel="nofollow noreferrer">this service</a> and the upload handler code is</p>
  
  <pre><code>    import org.springframework.web.multipart.MultipartHttpServletRequest;
      import org.springframework.web.multipart.commons.CommonsMultipartFile;
      import org.springframework.web.multipart.MultipartFile
      import org.codehaus.groovy.grails.web.context.ServletContextHolder
  
  
         class UploadLogoController {
            FileUploadService fileUploadService
  
                   def upload() {
  
                       def avatarImage = request.getFile('file')
                        if (!avatarImage.isEmpty()) 
                                {
          userInstance.avatar = fileUploadService.uploadFile(avatarImage, "logo.png", "~/Desktop/upload")                                   
                                render "ok"
                                }
                               else
                                 {
                                  render "Empty"    
  
                                }
  
                         }
  </code></pre>
  
  <p>}</p>
  
  <p>But the problem is I'm getting a <code>500 (Internal Server Error)</code>  from grails. The file is not being uploaded. </p>
  
  <p>also getting response as <code>Cannot invoke method isEmpty() on null object</code>
  Which means the file has not been sent to the server. Whats the problem here.. Please help..</p>