I am trying to recreate the spring-boot angularjs example application from here.
When I run the application using ./mnvw spring-boot:run the following error shows:
[ERROR] ERROR in src/app/app.component.html(6,18): : Property 'id' does not exist on type '{}'.
[ERROR] src/app/app.component.html(7,23): : Property 'content' does not exist on type '{}'.
My source code is the same as the link provided above but for clarity, the typescript file:
import { Component } from '#angular/core';
import {HttpClient} from '#angular/common/http';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Demo';
data = {};
constructor(private http: HttpClient) {
http.get('resource').subscribe(data => this.data = data);
}
}
The html file:
<div style="text-align:center"class="container">
<h1>
Welcome {{title}}!
</h1>
<div class="container">
<p>Id: <span>{{data.id}}</span></p>
<p>Message: <span>{{data.content}}</span></p>
</div>
</div>
And the java controller:
#SpringBootApplication
#Controller
public class AngularApplication {
public static void main(String[] args) {
SpringApplication.run(AngularApplication.class, args);
}
#GetMapping("/resource")
#ResponseBody
public Map<String, Object> home() {
Map<String, Object> model = new HashMap<String, Object>();
model.put("id", UUID.randomUUID().toString());
model.put("content", "Hello World");
return model;
}
}
The app.module.ts file imports HttpClientModule. When I ng serve the application to localhost:4200 the site loads but without data.
The idea is to service the /resource request and return an object with the right keys for the client, but the keys do not exist and/or are not being recognized by the client.
How do I correctly pass the generated id and hello world content to the data object?
There was a tiny difference in package.json that was causing the issue. The one from the provided link uses "build": "ng build" and the default generated one from CLI uses "build": "ng build --prod". After changing this the example is working.
Related
I have created the rest controller using spring-boot and apache cxf-rs, which returns the Page (org.springframework.data.domain.Page) with the entities. My problem is that Page in xml formal returns only Content with entities, without metadata (pageable, sort...). In json format all works fine - Page is dysplayed Content and metadata.
import org.springframework.data.domain.jaxb.PageAdapter;
#GET
#Produces({ MediaType.APPLICATION_JSON, MediaType.APPLICATION_XML })
#XmlJavaTypeAdapter(PageAdapter.class)
Page<Monitor> getAllMonitors(#PathParam("page") int page,
#PathParam("size") int size){
Pageable pageable = PageRequest.of(page, size);
return repository.findAll(pageable);
}
In config class I have a Bean for XML, provided by cxf-rs:
#Bean
public JAXBElementProvider jaxbElementProvider(){
JAXBElementProvider jaxbElementProvider = new JAXBElementProvider();
jaxbElementProvider.setSingleJaxbContext(true);
jaxbElementProvider.setExtraClass(new Class[] {Monitor.class});
return jaxbElementProvider;
}
I expect to see the page like this:
<sd:page xmlns:sd="http://www.springframework.org/schema/data/jaxb" xmlns:atom="http://www.w3.org/2005/Atom">
<content>
<Monitor>
... content
</Monitor>
</content>
<pageable>
...
</pageable>
<sort>
...
</sort>
<totalElements>...</totalElements>
<numberOfElements>...</numberOfElements>
</sd:page>
But I receive page only with content:
<sd:page xmlns:sd="http://www.springframework.org/schema/data/jaxb" xmlns:atom="http://www.w3.org/2005/Atom">
<content>
<Monitor>
... content
</Monitor>
</content>
</sd:page>
What should I do for displaying full Page in xml format?
Thanks for any help!
The application works fine when running Ng serve but when I run a maven install that runs my build, I get the following error.
'app-comparisons' is not a known element:
[INFO] 1. If 'app-comparisons' is an Angular component, then verify that it is part of this module.
[INFO] 2. If 'app-comparisons' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message. ("
[INFO] </table>
[INFO] </div>
[INFO] [ERROR ->]<app-comparisons></app-comparisons>
[INFO] </div>
[INFO] <div id="goals-2" class="spot-tabs__content">
My selector is the same in my html as in my component.ts
Here's is the component, comparisons.component.ts
import { Component, OnInit } from '#angular/core';
import {ComparisonsService} from '../services/comparisons.service';
import {Region} from '../models/region';
import {VetCount} from '../models/vetcount';
#Component({
selector: 'app-comparisons',
templateUrl: './comparisons.component.html',
styleUrls: ['./comparisons.component.scss']
})
export class ComparisonsComponent implements OnInit {
regions: Region [];
vetcounts: VetCount [];
similarCount = 245;
constructor(private comparisonsService: ComparisonsService) { }
ngOnInit() {
this.getRegions();
this.getVetCounts();
}
getRegions(): void {
this.regions = this.comparisonsService.getRegions();
}
getVetCounts(): void {
this.vetcounts = this.comparisonsService.getVetCounts();
}
}
And finally here is my app.module.ts which has my component imported and declared. I am not sure what I am missing.
import { ComparisonsComponent } from './comparisons/comparisons.component';
#NgModule({
declarations: [
AppComponent,
LoginComponent,
HomeComponent,
VdcComponent,
PracticeComponent,
IconComponent,
ComparisonsComponent,
GoalsComponent,
ReportsComponent,
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
routing,
ChartsModule,
],
providers: [
AuthGuardService,
AuthenticationService,
DataRequestService,
ComparisonsService,
ReportsService,
],
bootstrap: [AppComponent]
})
export class AppModule { }
Again the application works fine locally running ng serve but soon as it do a mvn install and it starts running Yarn and karma test it breaks with that error.
I have tried to use CommonsMultipartResolver in Boot translating my old application (WAR) to Boot, and right now it got the following code:
#Configuration
public class TestConfig {
#Bean
public FilterRegistrationBean openEntityManagerFilterRegistrationBean() {
// Set upload filter
final MultipartFilter multipartFilter = new MultipartFilter();
final FilterRegistrationBean filterRegistrationBean = new FilterRegistrationBean(multipartFilter);
filterRegistrationBean.addInitParameter("multipartResolverBeanName", "commonsMultipartResolver");
return filterRegistrationBean;
}
#Bean
public CommonsMultipartResolver commonsMultipartResolver() {
final CommonsMultipartResolver commonsMultipartResolver = new CommonsMultipartResolver();
commonsMultipartResolver.setMaxUploadSize(-1);
return commonsMultipartResolver;
}
}
Is this the right way in Boot, cause a I saw some properties to be applied in application.properties. Would they be the same purpose than defining a FilterRegistrationBean?
# MULTIPART (MultipartProperties)
multipart.enabled=true
multipart.file-size-threshold=0 # Threshold after which files will be written to disk.
multipart.location= # Intermediate location of uploaded files.
multipart.max-file-size=1Mb # Max file size.
multipart.max-request-size=10Mb # Max request size.
Could anyone provide any sample how to use it? Thanks.
By the way, It tried to set the property "multipart.enabled=true" and I got:
Caused by: org.springframework.beans.NotWritablePropertyException: Invalid property 'enabled' of bean class [org.springframework.boot.autoconfigure.web.MultipartProperties]: Bean property 'enabled' is not writable or has an invalid setter method. Does the parameter type of the setter match the return type of the getter?
at org.springframework.beans.BeanWrapperImpl.setPropertyValue(BeanWrapperImpl.java:1076)
at org.springframework.beans.BeanWrapperImpl.setPropertyValue(BeanWrapperImpl.java:927)
at org.springframework.beans.AbstractPropertyAccessor.setPropertyValues(AbstractPropertyAccessor.java:95)
at org.springframework.validation.DataBinder.applyPropertyValues(DataBinder.java:749)
at org.springframework.validation.DataBinder.doBind(DataBinder.java:645)
at org.springframework.boot.bind.RelaxedDataBinder.doBind(RelaxedDataBinder.java:121)
at org.springframework.validation.DataBinder.bind(DataBinder.java:630)
at org.springframework.boot.bind.PropertiesConfigurationFactory.doBindPropertiesToTarget(PropertiesConfigurationFactory.java:253)
at org.springframework.boot.bind.PropertiesConfigurationFactory.bindPropertiesToTarget(PropertiesConfigurationFactory.java:227)
at org.springframework.boot.context.properties.ConfigurationPropertiesBindingPostProcessor.postProcessBeforeInitialization(ConfigurationPropertiesBindingPostProcessor.java:296)
... 73 common frames omitted
First, there is no enabled property in org.springframework.boot.autoconfigure.web.MultipartProperties class.
Refer https://github.com/spring-projects/spring-boot/blob/master/spring-boot-autoconfigure/src/main/java/org/springframework/boot/autoconfigure/web/MultipartProperties.java
If you are using Servlet 3 container you no need to use commons-fileupload mechanism and Multipart support is enabled by default. If you don't want to customize any multipart default config no need to add any config in application.properties as well.
<form method="post" action="upload" enctype="multipart/form-data">
File: <input type="file" name="file"/>
<input type="submit" value="Submit"/>
</form>
#RequestMapping(value="/upload", method=RequestMethod.POST)
public String upload(#RequestPart("file") MultipartFile multipartFile)
{
System.out.println(multipartFile.getOriginalFilename());
return "redirect:/";
}
If you want to use commons-fileupload then adding following configuration is working fine:
package demo;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.context.embedded.FilterRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;
import org.springframework.web.multipart.support.MultipartFilter;
#SpringBootApplication
public class BootDemoApplication {
public static void main(String[] args) {
SpringApplication.run(BootDemoApplication.class, args);
}
#Bean
public CommonsMultipartResolver commonsMultipartResolver() {
final CommonsMultipartResolver commonsMultipartResolver = new CommonsMultipartResolver();
commonsMultipartResolver.setMaxUploadSize(-1);
return commonsMultipartResolver;
}
#Bean
public FilterRegistrationBean multipartFilterRegistrationBean() {
final MultipartFilter multipartFilter = new MultipartFilter();
final FilterRegistrationBean filterRegistrationBean = new FilterRegistrationBean(multipartFilter);
filterRegistrationBean.addInitParameter("multipartResolverBeanName", "commonsMultipartResolver");
return filterRegistrationBean;
}
}
And of course we need to add commons-fileupload dependency.
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.1</version>
</dependency>
This was a bug in Spring Boot and will be fixed in 1.2.5.
If you want to use CommonsMultipartFile to upload a file, please add #EnableAutoConfiguration(exclude = {MultipartAutoConfiguration.class}) in your spring boot project. Disable the multi-part configuration in spring boot.
public RespDataView provisionalMediaUpload(#RequestParam("file") CommonsMultipartFile file,
#RequestParam("type") String type) {}
I have a Java Spring MVC Web application as server. And AngularJS based application as client.
In AngularJS, I have to upload a file and send to server.
Here is my html
<form ng-submit="uploadFile()" class="form-horizontal" enctype="multipart/form-data">
<input type="file" name="file" ng-model="document.fileInput" id="file" onchange="angular.element(this).scope().setTitle(this)" />
<input type="text" class="col-sm-4" ng-model="document.title" id="title" />
<button class="btn btn-primary" type="submit">
Submit
</button>
</form>
Here is my UploadController.js
'use strict';
var mainApp=angular.module('mainApp', ['ngCookies']);
mainApp.controller('FileUploadController', function($scope, $http) {
$scope.document = {};
$scope.setTitle = function(fileInput) {
var file=fileInput.value;
var filename = file.replace(/^.*[\\\/]/, '');
var title = filename.substr(0, filename.lastIndexOf('.'));
$("#title").val(title);
$("#title").focus();
$scope.document.title=title;
};
$scope.uploadFile=function(){
var formData=new FormData();
formData.append("file",file.files[0]);
$http({
method: 'POST',
url: '/serverApp/rest/newDocument',
headers: { 'Content-Type': 'multipart/form-data'},
data: formData
})
.success(function(data, status) {
alert("Success ... " + status);
})
.error(function(data, status) {
alert("Error ... " + status);
});
};
});
It is going to the server. Here is my DocumentUploadController.java
#Controller
public class DocumentUploadController {
#RequestMapping(value="/newDocument", headers = "'Content-Type': 'multipart/form-data'", method = RequestMethod.POST)
public void UploadFile(MultipartHttpServletRequest request, HttpServletResponse response) {
Iterator<String> itr=request.getFileNames();
MultipartFile file=request.getFile(itr.next());
String fileName=file.getOriginalFilename();
System.out.println(fileName);
}
}
When I run this I get the following exception
org.springframework.web.multipart.MultipartException: Could not parse multipart servlet request; nested exception is org.apache.commons.fileupload.FileUploadException: the request was rejected because no multipart boundary was found] with root cause
org.apache.commons.fileupload.FileUploadException: the request was rejected because no multipart boundary was found
at org.apache.commons.fileupload.FileUploadBase$FileItemIteratorImpl.<init>(FileUploadBase.java:954)
at org.apache.commons.fileupload.FileUploadBase.getItemIterator(FileUploadBase.java:331)
at org.apache.commons.fileupload.FileUploadBase.parseRequest(FileUploadBase.java:351)
at org.apache.commons.fileupload.servlet.ServletFileUpload.parseRequest(ServletFileUpload.java:126)
at org.springframework.web.multipart.commons.CommonsMultipartResolver.parseRequest(CommonsMultipartResolver.java:156)
at org.springframework.web.multipart.commons.CommonsMultipartResolver.resolveMultipart(CommonsMultipartResolver.java:139)
at org.springframework.web.servlet.DispatcherServlet.checkMultipart(DispatcherServlet.java:1047)
at org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:892)
at org.springframework.web.servlet.DispatcherServlet.doService(DispatcherServlet.java:856)
at org.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:920)
at org.springframework.web.servlet.FrameworkServlet.doPost(FrameworkServlet.java:827)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:647)
at org.springframework.web.servlet.FrameworkServlet.service(FrameworkServlet.java:801)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:728)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:305)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:210)
at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:222)
at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:123)
at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:502)
at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:171)
at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:99)
at org.apache.catalina.valves.AccessLogValve.invoke(AccessLogValve.java:953)
at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:118)
at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:408)
at org.apache.coyote.http11.AbstractHttp11Processor.process(AbstractHttp11Processor.java:1023)
at org.apache.coyote.AbstractProtocol$AbstractConnectionHandler.process(AbstractProtocol.java:589)
at org.apache.tomcat.util.net.JIoEndpoint$SocketProcessor.run(JIoEndpoint.java:310)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1145)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:615)
at java.lang.Thread.run(Thread.java:744)
In my applicationContext.xml, I have mentioned
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="100000" />
</bean>
I am using
spring - 3.2.1.RELAESE
commons-fileupload - 1.2.2
commons-io - 2.4
How to solve this?
It would be great if anyone tel me how to send file and other formdata from angularJS and get it in server.
UPDATE 1
#Michael : I can see this only in the console, when I click submit.
POST http://localhost:9000/serverApp/rest/newDocument 500 (Internal Server Error) angular.js:9499
(anonymous function) angular.js:9499
sendReq angular.js:9333
$http angular.js:9124
$scope.uploadFile invoice.js:113
(anonymous function) angular.js:6541
(anonymous function) angular.js:13256
Scope.$eval angular.js:8218
Scope.$apply angular.js:8298
(anonymous function) angular.js:13255
jQuery.event.dispatch jquery.js:3074
elemData.handle
My server is running in other port 8080. I am uisng yeoman,grunt and bower. So thin gruntfile.js I have mentioned the server port. So it goes to server and running that and throws the exception
UPDATE 2
The boundary is not setting
Request URL:http://localhost:9000/serverApp/rest/newDocument
Request Method:POST
Status Code:500 Internal Server Error
Request Headers view source
Accept:application/json, text/plain, */*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Content-Length:792
Content-Type:multipart/form-data
Cookie:ace.settings=%7B%22sidebar-collapsed%22%3A-1%7D; isLoggedIn=true; loggedUser=%7B%22name%22%3A%22admin%22%2C%22password%22%3A%22admin23%22%7D
Host:localhost:9000
Origin:http://localhost:9000
Referer:http://localhost:9000/
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.63 Safari/537.36
X-Requested-With:XMLHttpRequest
Request Payload
------WebKitFormBoundaryCWaRAlfQoZEBGofY
Content-Disposition: form-data; name="file"; filename="csv.csv"
Content-Type: text/csv
------WebKitFormBoundaryCWaRAlfQoZEBGofY--
Response Headers view source
connection:close
content-length:5007
content-type:text/html;charset=utf-8
date:Thu, 09 Jan 2014 11:46:53 GMT
server:Apache-Coyote/1.1
I faced the same issue and encountered the same issue even after updating the transformRequest. 'Some how, the header boundary doesn't seem to have set correctly.
Following http://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs, the problem is resolved. Extract from the location....
By setting ‘Content-Type’: undefined, the browser sets the Content-Type to multipart/form-data for us and fills in the correct boundary. Manually setting ‘Content-Type’: multipart/form-data will fail to fill in the boundary parameter of the request.
Not sure if this helps any one but perhaps makes it easy for people looking at this post... At least, it makes it less difficult.
Introduction
I have had the same problem and found a complete solution to send both json and file from angular based page to a Spring MVC method.
The main problem is the $http which doesn't send the proper Content-type header (I will explain why).
The theory about multipart/form-data
To send both json and file we need to send a multipart/form-data, which means "we send different items in the body separated by a special separator". This special separator is called "boundary", which is a string that is not present in any of the elements that are going to be sent.
The server needs to know which boundary is being used so it has to be indicated in the Content-type header (Content-Type multipart/form-data; boundary=$the_boundary_used).
So... two things are needed:
In the header --> indicate multipart/form-data AND which boundary is used (here is where $http fails)
In the body --> separate each request parameter with the boundary
Example of a good request:
header
Content-Type multipart/form-data; boundary=---------------------------129291770317552
Which is telling the server "I send a multipart message with the next separator (boundary): ---------------------------129291770317552
body
-----------------------------129291770317552 Content-Disposition: form-data; name="clientInfo"
{ "name": "Johny", "surname":"Cash"}
-----------------------------129291770317552
Content-Disposition: form-data; name="file"; filename="yourFile.pdf"
Content-Type: application/pdf
%PDF-1.4
%õäöü
-----------------------------129291770317552 --
Where we are sending 2 arguments, "clientInfo" and "file" separated by the boundary.
The problem
If the request is sent with $http, the boundary is not sent in the header (point 1), so Spring is not able to process the data (it doesn't know how to split the "parts" of the request).
The other problem is that the boundary is only known by the FormData... but FormData has no accesors so it's impossible to know which boundary is being used!!!
The solution
Instead of using $http in js you should use standard XMLHttpRequest, something like:
//create form data to send via POST
var formData=new FormData();
console.log('loading json info');
formData.append('infoClient',angular.toJson(client,true));
// !!! when calling formData.append the boundary is auto generated!!!
// but... there is no way to know which boundary is being used !!!
console.log('loading file);
var file= ...; // you should load the fileDomElement[0].files[0]
formData.append('file',file);
//create the ajax request (traditional way)
var request = new XMLHttpRequest();
request.open('POST', uploadUrl);
request.send(formData);
Then, in your Spring method you could have something like:
#RequestMapping(value = "/", method = RequestMethod.POST)
public #ResponseBody Object newClient(
#RequestParam(value = "infoClient") String infoClientString,
#RequestParam(value = "file") MultipartFile file) {
// parse the json string into a valid DTO
ClientDTO infoClient = gson.fromJson(infoClientString, ClientDTO.class);
//call the proper service method
this.clientService.newClient(infoClient,file);
return null;
}
Carlos Verdes's answer failed to work with my $http interceptor, which adds authorization headers and so on. So I decided to add to his solution and create mine using $http.
Clientside Angular (1.3.15)
My form (using the controllerAs syntax) is assuming a file and a simple object containing the information we need to send to the server. In this case I'm using a simple name and type String property.
<form>
<input type="text" ng-model="myController.myObject.name" />
<select class="form-control input-sm" ng-model="myController.myObject.type"
ng-options="type as type for type in myController.types"></select>
<input class="input-file" file-model="myController.file" type="file">
</form>
The first step was to create a directive that binds my file to the scope of the designated controller (in this case myController) so I can access it. Binding it directly to a model in your controller won't work as the input type=file isn't a built-in feature.
.directive('fileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
element.bind('change', function(){
scope.$apply(function(){
modelSetter(scope, element[0].files[0]);
});
});
}
};
}]);
Secondly I created a factory called myObject with an instance method create that allows me to transform the data upon invoking create on the server. This method adds everything to a FormData object and converts it using the transformRequest method (angular.identity). It is crucial to set your header to undefined. (Older Angular versions might require something than undefined to be set). This will allow the multidata/boundary marker to be set automatically (see Carlos's post).
myObject.prototype.create = function(myObject, file) {
var formData = new FormData();
formData.append('refTemplateDTO', angular.toJson(myObject));
formData.append('file', file);
return $http.post(url, formData, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined }
});
}
All that is left to do client side is instantiating a new myObject in myController and invoking the create method in the controller's create function upon submitting my form.
this.myObject = new myObject();
this.create = function() {
//Some pre handling/verification
this.myObject.create(this.myObject, this.file).then(
//Do some post success/error handling
);
}.bind(this);
Serverside Spring (4.0)
On the RestController I can now simply do the following: (Assuming we have a POJO MyObject)
#RequestMapping(method = RequestMethod.POST)
#Secured({ "ROLE_ADMIN" }) //This is why I needed my $httpInterceptor
public void create(MyObject myObject, MultipartFile file) {
//delegation to the correct service
}
Notice, I'm not using requestparameters but just letting spring do the JSON to POJO/DTO conversion. Make sure you got the MultiPartResolver bean set up correctly too and added to your pom.xml. (And Jackson-Mapper if needed)
spring-context.xml
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="268435456" /> <!-- 256 megs -->
</bean>
pom.xml
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>${commons-fileupload.version}</version>
</dependency>
You can try this
.js
$scope.uploadFile=function(){
var formData=new FormData();
formData.append("file",file.files[0]);
$http.post('/serverApp/rest/newDocument', formData, {
transformRequest: function(data, headersGetterFunction) {
return data;
},
headers: { 'Content-Type': undefined }
}).success(function(data, status) {
alert("Success ... " + status);
}).error(function(data, status) {
alert("Error ... " + status);
});
.java
#Controller
public class DocumentUploadController {
#RequestMapping(value="/newDocument", method = RequestMethod.POST)
public #ResponseBody void UploadFile(#RequestParam(value="file", required=true) MultipartFile file) {
String fileName=file.getOriginalFilename();
System.out.println(fileName);
}
}
That's based on https://github.com/murygin/rest-document-archive
There is a good example of file upload
https://murygin.wordpress.com/2014/10/13/rest-web-service-file-uploads-spring-boot/
I am working on a spring mvc web application, in which I am using Google Visualization API for generating some charts. I have a model class which contains 2 arraylists, which represent the data that I`m sending to the function that draws the chart (this is what i want to be converted to a JSON).
The model class:
#Component
public class JsonResponse {
private List<Integer> percentages = new ArrayList<Integer>();
private List<String> topics = new ArrayList<String>();
public JsonResponse(){
}
public List<Integer> getPercentages() {
return percentages;
}
public void setPercentages(List<Integer> percentages) {
this.percentages = percentages;
}
public List<String> getTopics() {
return topics;
}
public void setTopics(List<String> topics) {
this.topics = topics;
}
}
Then Ive got a#Component` annotated class which contains a method that returns a model object (of the class that I wrote above), with the 2 arraylists attributes populated.
#Component
public class ChartUtils {
#Autowired
public JsonResponse response;
public JsonResponse listPieChartData( ModelAndView model ,int waveId ){
//arraylists for chart generation
List<Integer> percentages = new ArrayList<Integer>();
List<String> topics = new ArrayList<String>();
{... code for accessing the DB and processing some data and then populating the 2
arraylists ... }
response.setTopics(topics);
response.setPercentages(percentages);
return response;}
}
So the Controller class, the one that has the mapping for the action that I am calling to gather data for the chart generation and in which I am calling listPieChartData method, from the class above, and in which I'm also using the #ResponseBody annotation is this:
#Controller
public class ChartController {
#Autowired
public ChartUtils utils;
#Autowired
public JsonResponse response;
#RequestMapping(value = "/drawPieChart", method = RequestMethod.GET )
#ResponseBody
public JsonResponse drawPieChart( ModelAndView model,
#RequestParam(value = "id", defaultValue = "-1") int waveId ) {
return utils.listPieChartData(model,waveId ); }
The JavaScript function that draws the chart :
function drawColumnChart(percentages, topics , div,width,height) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Wave');
for (var i=0; i < topics.length; i++){
data.addColumn( 'number', topics[i] );
}
data.addRow( percentages );
var wave=percentages[0];
var options = {
'title':'Generated Chart For '+wave,
'backgroundColor': { fill: "none" },
'is3D': true,
'width':width,
'height':height,
};
var chart = new google.visualization.ColumnChart(document.getElementById(div));
chart.draw(data, options);
}
And the AJAX call to the controller's mapped method (for gathering data) that finally calls the above JS function to obtain the chart (I'm also sending the request param int id for the controller method , I didn't wrote that)
$("#button").live("click", function(){
var arrayP, arrayT;
$.ajax({
url: "drawPieChart",
contentType: "application/json",
data: params,
success: function(data) {
$.each(data, function(messageIndex, message) {
if (messageIndex === 0) {
arrayP = message;
} else {
arrayT = message;
}
});
drawPieChart(arrayP, arrayT,'chart_div',600,400);
}
});
});
I know this is a lot of code :) but it's pretty simple code, to understand the flow better, here is how it`s working:
From a button input I'm calling, with AJAX, the mapped method to the drawPieChart action (which is in the ChartController class), this methods sends the response through invoking the listPieChart method (from the ChartUtils class), which returns a JsonResponse object, (which contains 2 arraylists). This JsonResponse should be converted to a JSON, because in the AJAX request, I'm telling that the request needs a JSON input (via contentType: "application/json"), and it should get it because I use #ResponseBody in the controller method mapped for this request.
I`m getting this response:
The resource identified by this request is only capable of generating
responses with characteristics not acceptable according to the request
"accept" headers ().
(HTTP Status 406)
Please correct me where I'm wrong, I just can't get this working and I can't figure out why...
And my servlet-context.xml:
<?xml version="1.0" encoding="UTF-8"?>
<beans:beans xmlns="http://www.springframework.org/schema/mvc"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:beans="http://www.springframework.org/schema/beans"
xmlns:context="http://www.springframework.org/schema/context"
xsi:schemaLocation="http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.0.xsd">
<!-- DispatcherServlet Context: defines this servlet's request-processing
infrastructure -->
<!-- Enables the Spring MVC #Controller programming model -->
<annotation-driven />
<!-- Handles HTTP GET requests for /resources/** by efficiently serving up
static resources in the ${webappRoot}/resources directory -->
<resources mapping="/resources/**" location="/resources/" />
<!-- Resolves views selected for rendering by #Controllers to .jsp resources
in the /WEB-INF/views directory -->
<beans:bean
class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<beans:property name="prefix" value="/WEB-INF/views/" />
<beans:property name="suffix" value=".jsp" />
</beans:bean>
<context:component-scan base-package="com.bla.bla" />
<beans:import resource="classpath:springJDBC.xml" />
</beans:beans>
So the problem was that i didn'd have all the Jackson dependencies declared in pom.xml.
These are the dependencies for your maven project in case you want Spring 3 to automatically serialize an object for you , using the #ResponseBody annotation , as a response from a method.
Noob stuff , but I didn't saw this mentioned in the examples that I found .
<dependency>
<groupId>org.codehaus.jackson</groupId>
<artifactId>jackson-jaxrs</artifactId>
<version>1.6.1</version>
</dependency>
<dependency>
<groupId>org.codehaus.jackson</groupId>
<artifactId>jackson-mapper-asl</artifactId>
<version>1.9.9</version>
</dependency>
<dependency>
<groupId>org.codehaus.jackson</groupId>
<artifactId>jackson-core-asl</artifactId>
<version>1.9.9</version>
</dependency>
Also , I had to change some stuff in the ajax call for invoking the method that is returning the json object with data for the chart generation :
$("#buttonPieGenerate").live("click", function(){
$.ajax({
url: "drawPieChart", //method from controller
contentType: "application/json",
data: params,
success: function(data) {
drawPieChart(data.percentages, data.topics,'chart_div',600,400);
}
});
});
I'm accessing the data in the Json object that I`m getting as a response from the call with data.percentages , data.topics .
A small update for the world of 2015:
<dependency>
<!-- Just placing this on the classpath will enable JSON for #ResponseBody -->
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.5.3</version>
</dependency>