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

1

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>

answered May 10, 2017 at 7:50

user2070946

Sign up to request clarification or add additional context in comments.

2 Comments

Hema Over a year ago

yes its already present,i think the problem is sending from angular side

user2070946 Over a year ago

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

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, 2017 at 8:24

Leon Radley

7,7125 gold badges39 silver badges55 bronze badges

1 Comment

Hema Over a year ago

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

1

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.

answered May 10, 2017 at 10:19

Hema

9861 gold badge16 silver badges38 bronze badges

Comments

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

1

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

answered Jun 12, 2017 at 5:28

Coder

215 bronze badges

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

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related