title: Multiple image upload with angular js and spring
body: <p>I want to upload multiple image .For that i am using angular js and spring mvc.Here I am able to get all the files in angular js but when i am clicking on upload  ,its not showing error and its not going inside the spring controller too. I jjust want to print text with there in system.out.print statement.Please help me out.</p>
  
  <p>Thank you.</p>
  
  <p>Here is my html:-</p>
  
  <pre><code> &lt;div class="button" ngf-select ng-model="files" ngf-multiple="multiple"&gt;Select File&lt;/div&gt;
  
      Drop File:
      &lt;div ngf-drop ngf-select ng-model="files" class="drop-box"
          ngf-drag-over-class="dragover" ngf-multiple="true" ngf-allow-dir="true"
          accept="image/*,application/pdf"&gt;Drop pdfs or images here or click to upload&lt;/div&gt;
      &lt;div ngf-no-file-drop&gt;File Drag/Drop is not supported for this browser&lt;/div&gt;
      Files:
  
      &lt;ul&gt;
          &lt;li ng-repeat="f in filesDetails" style="font:smaller"&gt;{{f.name}}&lt;/li&gt;
      &lt;/ul&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
           &lt;button class="" ng-click="uploadImage()"&gt;Upload Image&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my controller.js:-</p>
  
  <pre><code>var app = angular.module('fileUpload', ['ngFileUpload']);
  
  app.controller('MyCtrl', ['$scope', 'Upload', '$http', function($scope, Upload, $http) {
      $scope.filesDetails = [];
      $scope.$watch('files', function() {
  
          $scope.upload($scope.files);
      });
  
  
      $scope.upload = function(files) {
          if (files &amp;&amp; files.length) {
              for (var i = 0; i &lt; files.length; i++) {
  
                  if (files[i].type == 'image/jpeg' || files[i].type == 'image/png') {
                      $scope.filesDetails.push(files[i]);
                  } else {
                      alert("This kind of file is not Valid");
  
                  }
              }
          }
      };
  
      $scope.uploadImage = function() {
  
  
  
          alert("uploading");
          var formData = {
              file: $scope.filesDetails
          };
          console.log(formData.file);
  
          var imagePost = $http.post(
              'http://localhost:8080/orion-orbit/newclue/doUpload',
              formData,
              {
                  transformRequest: 
                      function(data, headersGetterFunction) {
                      return data;
                  },
                  headers: { 'Content-Type': 'multipart/form-data' }
              });
  
  
          imagePost.success(function(data, status,
              headers, config) {
              alert("sucess" + status);
  
          });
          imagePost.error(function(data, status,
              headers, config) {
              alert("Error" + status);
              alert("Exception details: " + JSON.stringify({
                  data: data
              }));
  
          });
      }
  }]);
  </code></pre>
  
  <p>Here is my spring Controller:-
  @Controller</p>
  
  <pre><code>@RequestMapping("/newclue")
  public class ClueController {
  
  @RequestMapping(value="/doUpload" , method = RequestMethod.POST , consumes = "multipart/form-data")
  
      public void handleFileUpload(@RequestParam("file") MultipartFile file) 
      {
      System.out.println("inside controller of image Upload");
  
      }
  </code></pre>
  
  <p>}</p>
  
  <p>This is my web.xml:-</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5"&gt;
    &lt;display-name&gt;Sample Spring Maven Project&lt;/display-name&gt;
    &lt;servlet&gt;
      &lt;servlet-name&gt;mvc-dispatcher&lt;/servlet-name&gt;
      &lt;servlet-class&gt;org.springframework.web.servlet.DispatcherServlet&lt;/servlet-class&gt;
      &lt;init-param&gt;
        &lt;param-name&gt;contextConfigLocation&lt;/param-name&gt;
        &lt;param-value&gt;/WEB-INF/spring-config.xml&lt;/param-value&gt;
      &lt;/init-param&gt;
      &lt;load-on-startup&gt;1&lt;/load-on-startup&gt;
    &lt;/servlet&gt;
    &lt;servlet-mapping&gt;
      &lt;servlet-name&gt;mvc-dispatcher&lt;/servlet-name&gt;
      &lt;url-pattern&gt;/&lt;/url-pattern&gt;
    &lt;/servlet-mapping&gt;
  
    &lt;error-page&gt;
          &lt;error-code&gt;404&lt;/error-code&gt;
          &lt;location&gt;/error-pages/404-error.jsp&lt;/location&gt;
      &lt;/error-page&gt;
      &lt;error-page&gt;
          &lt;error-code&gt;500&lt;/error-code&gt;
          &lt;location&gt;/error-pages/500-error.jsp&lt;/location&gt;
      &lt;/error-page&gt;
  &lt;/web-app&gt;
  </code></pre>
  
  <p>Here is my spring-config-file:-</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;beans xmlns="http://www.springframework.org/schema/beans"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"
      xmlns:util="http://www.springframework.org/schema/util" xmlns:mvc="http://www.springframework.org/schema/mvc"
      xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd
    http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
    http://www.springframework.org/schema/util http://www.springframework.org/schema/util/spring-util-3.2.xsd
    http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.2.xsd"&gt;
  
      &lt;context:component-scan base-package="com.orion.orbit.controller" /&gt;
      &lt;mvc:annotation-driven /&gt;
  
      &lt;bean id="dataSource"
          class="org.springframework.jdbc.datasource.DriverManagerDataSource"&gt;
          &lt;property name="driverClassName" value="com.mysql.jdbc.Driver" /&gt;
          &lt;property name="url" value="jdbc:mysql://localhost:3306/o2_db" /&gt;
          &lt;property name="username" value="root" /&gt;
          &lt;property name="password" value="root" /&gt;
      &lt;/bean&gt;
  
      &lt;bean id="sessionFactory"
          class="org.springframework.orm.hibernate4.LocalSessionFactoryBean"&gt;
          &lt;property name="dataSource" ref="dataSource" /&gt;
          &lt;property name="annotatedClasses"&gt;
              &lt;list&gt;
                  &lt;value&gt;com.orion.orbit.model.CountryCode&lt;/value&gt;
                  &lt;value&gt;com.orion.orbit.model.CityCode&lt;/value&gt;
                  &lt;value&gt;com.orion.orbit.model.ClueData&lt;/value&gt;               
                  &lt;value&gt;com.orion.orbit.model.ClueAns&lt;/value&gt;
                  &lt;value&gt;com.orion.orbit.model.AnsClueMap&lt;/value&gt;
                  &lt;value&gt;com.orion.orbit.model.ClueTag&lt;/value&gt;
                  &lt;value&gt;com.orion.orbit.model.ClueTagMap&lt;/value&gt;
                  &lt;value&gt;com.orion.orbit.model.NewClueRequestVO&lt;/value&gt;
                  &lt;value&gt;com.orion.orbit.model.UploadFile&lt;/value&gt;
              &lt;/list&gt;
          &lt;/property&gt;
          &lt;property name="hibernateProperties"&gt;
              &lt;props&gt;
                  &lt;prop key="hibernate.dialect"&gt;org.hibernate.dialect.MySQL5Dialect&lt;/prop&gt;
                  &lt;prop key="hibernate.show_sql"&gt;true&lt;/prop&gt;
              &lt;/props&gt;
          &lt;/property&gt;
      &lt;/bean&gt;
  
      &lt;bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"&gt;
          &lt;property name="prefix" value="/" /&gt;
          &lt;property name="suffix" value=".jsp" /&gt;
      &lt;/bean&gt;
      &lt;bean id="simpleMappingExceptionResolver" class="com.orion.orbit.resolver.MySimpleMappingExceptionResolver"&gt;
          &lt;property name="exceptionMappings"&gt;
              &lt;map&gt;
                  &lt;entry key="Exception" value="error"&gt;&lt;/entry&gt;
              &lt;/map&gt;
          &lt;/property&gt;
          &lt;property name="defaultErrorView" value="error" /&gt;
      &lt;/bean&gt;
  
      &lt;bean id="txManager"
          class="org.springframework.orm.hibernate4.HibernateTransactionManager"&gt;
          &lt;property name="sessionFactory" ref="sessionFactory" /&gt;
      &lt;/bean&gt;
  
      &lt;bean id="persistenceExceptionTranslationPostProcessor"
          class="org.springframework.dao.annotation.PersistenceExceptionTranslationPostProcessor" /&gt;
  
      &lt;bean id="clueDao" class="com.orion.orbit.dao.ClueDaoImpl"&gt;&lt;/bean&gt;
      &lt;bean id="clueServices" class="com.orion.orbit.services.ClueServicesImpl"&gt;&lt;/bean&gt;
      &lt;bean id="multipartResolver"
          class="org.springframework.web.multipart.commons.CommonsMultipartResolver"&gt;
  
          &lt;!-- one of the properties available; the maximum file size in bytes --&gt;
          &lt;property name="maxUploadSize" value="10000000" /&gt;
      &lt;/bean&gt;
      &lt;mvc:resources mapping="/resources/**" location="/resources/" /&gt;
  
  &lt;/beans&gt;
  </code></pre>