Error while uploading image with form using Angular Js and Spring Mvc

Question

I have succeeded in uploading image into Database using AngularJS and Spring Mvc.But now I need to add form feilds and submit it simultaneously. Please do help me.Here is my code.

controller.js

scope.product = {}; scope.addProduct=function(product){ var formData=new FormData(); formData.append("file",file.files[0]); formData.append("product",angular.toJson(product)); http({ method: 'POST', url: '/name/addProduct', headers: { 'Content-Type': undefined}, data: formData, }) .success(function(data, status) { alert("Success ... " + status); }) .error(function(data, status) { alert("Error ... " + status); }); };

Controller.java

@RequestMapping(value = "/addProduct",consumes = {"multipart/form-data"}, method = RequestMethod.POST) @ResponseBody public Product addProduct(Product product, @RequestPart("file") MultipartFile file, HttpSession session, HttpServletRequest request, HttpServletResponse response) throws IOException, SerialException, SQLException{ byte[] mediaBytes = file.getBytes(); product.setImage(mediaBytes); Product product2 = adminService.addProduct(product); return product2; }

Product.java

public class Product { @Id @Column(name="productId") private Integer productId; @Column(name="itemName") private String itemName; @ManyToOne @JoinColumn(name="categoryId",insertable=true, updatable=true, nullable=false) //@JsonManagedReference private Category categoryId; @Column(name="image",columnDefinition="mediumblob") private byte[] image; @Transient private String statusMessage; @Transient private Long CategoryValue; //getters and setters }

addItem.html

<form name="myForm" role="form" class="addItem" autocomplete="off" id="addItem" enctype="multipart/form-data"> <input type="text" class="form-control" name="productId" ng-model="product.productId" placeholder="Product Id" ng-minlength="4" maxlength="4" required /> <input class="form-control" name="itemName" type="text" ng-model="product.itemName" required /> <input type="text" class="form-control" name="categoryValue" ng-model="product.categoryValue" required /> <input type="file" name="file" id="file" /> <input type="submit" name="Submit" class="btn btn-primary" value="Submit" data-ng-disabled="myForm.$invalid" ng- click="myForm.$invalid=true;addProduct(product)" /> </form>

Stacktrace

ServletInvocableHandlerMethod:164 - Failed to resolve argument 0 of type 'com.tta.abcd.model.Product' org.springframework.web.multipart.support.MissingServletRequestPartException: Required request part 'properties' is not present at org.springframework.web.multipart.support.RequestPartServletServerHttpRequest.<init>(RequestPartServletServerHttpRequest.java:70) at org.springframework.web.servlet.mvc.method.annotation.RequestPartMethodArgumentResolver.resolveArgument(RequestPartMethodArgumentResolver.java:126)

update

After removing @RequestPart("properties") am getting product data as null in controller.

I have posted here after trying many ways. Please help me.

Thank you.

Please refer the below link for the resolution stackoverflow.com/questions/37922973/… — user2070946
– user2070946, Commented May 10, 2017 at 7:30

user2070946 · Accepted Answer · 2017-05-10 07:50:26Z

You have to mention the below bean id in your spring context file.

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"><property name="maxUploadSize" value="10000000"/></bean>

And if you are using maven, add the dependencies as well.

<!-- Apache Commons FileUpload --> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.2</version> </dependency> <!-- Apache Commons IO --> <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.5</version> </dependency>

yes its already present,i think the problem is sending from angular side
Please try with the below one... var fd = new FormData(); fd.append("files", $scope.file);

Leon Radley · Accepted Answer · 2017-05-10 08:24:21Z

Your variable names don't add upp.

In angular

formData.append("product",angular.toJson(product))

but in spring you've called it

@RequestPart("properties") Product product

Could that be the problem?

Now i have changed code.control is hitting to spring.But am getting product values as null after removing @RequestPart("properties") .

Hema · Accepted Answer · 2017-05-10 10:19:06Z

I have fixed my issue.Am posting changes i have made,If incase anyone needs it.

Controller.js

formData.append("file",file.files[0]); formData.append("product",new Blob([JSON.stringify(product)],{type: "application/json"}));

Controller.java

public Product addProduct(@RequestPart("file") MultipartFile file, @RequestPart("product")Product product, HttpSession session, HttpServletRequest request, HttpServletResponse response)throws IOException, SerialException, SQLException{ byte[] mediaBytes = file.getBytes(); product.setImage(mediaBytes); Product product2 = adminService.addProduct(product); return product; }

After these changes,My code worked perfect.

Coder · Accepted Answer · 2017-06-12 05:28:13Z

 formData.append("file",file.files[0]); formData.append("user",new Blob([JSON.stringify(user)],{type: "application/json"})); http({ method: 'POST', url: '/projectName/url', headers: { 'Content-Type': undefined},//to set boundary value by default data: formData, })

Collectives™ on Stack Overflow

Error while uploading image with form using Angular Js and Spring Mvc

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Linked

Related