ExtJS and Spring MVC file upload failed

Question

I am trying to upload file with additional fields but the browser shows the error:

"HTTP Status 400 - The request sent by the client was syntactically incorrect ()."

Here are my Java codes:

@RequestMapping(value = "/save.do", method = RequestMethod.POST)
public @ResponseBody
void saveUser(
        @RequestBody SystemUser systemUser,
        @RequestParam("file") MultipartFile file,
        BindingResult result) {
    if (result.hasErrors()) {
        for (ObjectError error : result.getAllErrors()) {
            System.err.println("Error: " + error.getCode() + " - "
                    + error.getDefaultMessage());
        }
    }
    String fileName = file.getOriginalFilename();
    try {
        byte[] bytes = file.getBytes();

        // Creating the directory to store file
        String rootPath = System.getProperty("catalina.home");
        File dir = new File(rootPath + File.separator + "img");
        if (!dir.exists())
            dir.mkdirs();

        // Create the file on server
        File serverFile = new File(dir.getAbsolutePath() + File.separator
                + fileName);
        BufferedOutputStream stream = new BufferedOutputStream(
                new FileOutputStream(serverFile));
        stream.write(bytes);
        stream.close();
        systemUser.setImageFile(fileName);
        systemUserService.create(systemUser);
    } catch (Exception e) {
        e.printStackTrace();
    }

}

Here's my JS Code:

userformAdd = Ext.create('Ext.window.Window',{
          alias   : 'widget.usersform',
          title   : 'Add User',
          id : 'add',
          width   : 350,
          layout  : 'fit',
          resizable: false,
          closeAction: 'hide',
          modal   : true,
          config  : {
            recordIndex : 0,
            action : ''
          },
          items   : [{
            xtype : 'form',
            layout: 'anchor',
            bodyStyle: {
              background: 'none',
              padding: '10px',
              border: '0'
            },
            defaults: {
              xtype : 'textfield',
              anchor: '100%'
            },
            items : [{
              name  : 'id',
              fieldLabel: 'ID'
            },{
              name: 'fullName',
              fieldLabel: 'Full Name'
            },{
              name: 'address1',
              fieldLabel: 'Address 1'
            },{
              name: 'address2',
              fieldLabel: 'Address 2'
            },{
              name: 'contact1',
              fieldLabel: 'Contact 1'
            },{
              name: 'contact2',
              fieldLabel: 'Contact 2'
             },{
                    xtype: 'fileuploadfield',
                    name: 'file',
                    fieldLabel: 'File',
                    labelWidth: 50,
                    msgTarget: 'side',
                    allowBlank: false,
                    anchor: '100%',
                    buttonText: 'Select a File...'
                }]
          }],
          buttons: [{
            text: 'OK',
            handler : function (btn){
                var values = btn.up('window').down('form').getForm();
                values.submit({
                    url: 'module/save.do',
                    success: function(fp, o) {
                        var grid = Ext.ComponentQuery.query('grid')[0];
                        grid.getStore().load();
                    }
                });
                    userformAdd.close();
                ;
            }
          },{
            text    : 'Reset',
            handler : function () { 
              this.up('window').down('form').getForm().reset(); 
            }
          },{
            text   : 'Cancel',
            handler: function () { 
              this.up('window').close();
            }
          }]
        });

And I've also used the bean for the multipartResolver in the xml configuration:

<bean id="multipartResolver"
    class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <!-- one of the properties available; the maximum file size in bytes -->
    <property name="maxUploadSize" value="5000000" />
</bean>

Not sure what I'm doing wrong here...Any suggestion/help would be appreciated. Thanks

score 0 · Answer 1 · edited May 23 '17 at 12:05

0

If you are going to return void from saveUser you need to return an ResponseStatus to signal a successful processing and you don't need the ResponseBody.

@RequestMapping(value = "/save.do", method = RequestMethod.POST)
@ResponseStatus(value = HttpStatus.OK) 
public void saveUser(...)

If you review the Interface definition for @ResponseBody you will see that it indicates the method should return a value.

public @interface ResponseBody
Annotation that indicates a method return value should be bound to the web response body. Supported for annotated handler methods in Servlet environments.

Another problem you may have is that you are declaring a @RequestBody parameter with a value of SystemUser To enable automatic conversion you can use @EnableWebMvc or implement a message converter..

Here's an example of how you can Implement a MessageConveter

Another thing I see suspect is that you have your controller mapped to /save.do and your JSON is posting to /module/save.do

edited May 23 '17 at 12:05

Community

1
1

answered Dec 30 '14 at 09:08

Edward J Beckett

5,061
1
41
41

There's problem with HTTP itself (Error 400)...it didn't solve the problem :( – Akash Rajbanshi Dec 30 '14 at 09:14
Try again with the method declaration I provided. @ResponseBody is stating, `return a value` but you have a `void` definition. – Edward J Beckett Dec 30 '14 at 09:17
I declared the annotations as you provided and removed the @ResponseBody but the problem is still the same... – Akash Rajbanshi Dec 30 '14 at 09:27
@AkashRajbanshi Do you have a MessageConverter for your SystemUser RequestBody? – Edward J Beckett Dec 30 '14 at 09:35
Do you have or @EnableWebMvc in your config? – Edward J Beckett Dec 30 '14 at 09:46
no i dont have any..but excluding the file upload, the method was working fine without the MessageConverter. – Akash Rajbanshi Dec 30 '14 at 09:47
yes i also have in my config – Akash Rajbanshi Dec 30 '14 at 09:47
Wait a second. Why is your post going to /module/save.do and your controller is mapped to /save.do? – Edward J Beckett Dec 30 '14 at 09:52
that is not a problem here...i have declared @RequestMapping("/module") at the top of the class... – Akash Rajbanshi Dec 30 '14 at 09:54
The problem is solved just by removing the @RequestBody in the SystemUSer param... Thanks for the suggestions :) – Akash Rajbanshi Dec 30 '14 at 10:28

score 0 · Answer 2 · answered Dec 30 '14 at 09:54

0

In your ExtJS form, you need to have fileUpload set to true and method POST

answered Dec 30 '14 at 09:54

Jay

1,539
1
16
27

ExtJS and Spring MVC file upload failed

2 Answers2