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 http://stackoverflow.com/questions/37922973/spring-mvc-file-upload-unable-to-process-parts-as-no-multi-part-configuration — , May 10 '17 at 07:30

score 1 · Answer 1 · answered May 10 '17 at 07:50

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 — Hema, May 10 '17 at 07:51
Please try with the below one... `var fd = new FormData();` `fd.append("files", $scope.file);` — , May 10 '17 at 08:46

score 1 · Answer 2 · answered May 10 '17 at 08:24

1

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?

answered May 10 '17 at 08:24

Leon Radley

7,596
5
35
54

Now i have changed code.control is hitting to spring.But am getting product values as null after removing @RequestPart("properties") . – Hema May 10 '17 at 08:25

score 1 · Accepted Answer · answered May 10 '17 at 10:19

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.

score 1 · Answer 4 · answered Jun 12 '17 at 05:28

 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,
                        })

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

4 Answers4