Extjs: upload file with submit form

Question

I'm trying to upload file (excel) using ExtJs and Spring without luck, so I hope you will help me. In panel I have a button (fileuploadfield) and with that I select a file, which I want to upload.

.
.
,{
    xtype: 'fileuploadfield',
    buttonOnly: true,
    hideLabel: true,
    buttonText: "Importuoti excel failą",
    border: false,
    itemId: "uploadBtn",
    name: 'file'

},
.
.

This is my controller. Every time I choose file with fileuploadfield it activates function uploadFile().

init: function() {
    var me = this;
    this.listen({
        '#uploadBtn': {
                'change': function(fld, value) {
                    console.log(value);
                    this.getTurtasPanel().setLoading(true, true);
                    if(value != ""){
                        me.uploadFile();
                        fld.reset();
                    }

                }
            },
})

uploadFile function.

uploadFile: function(){
    var fp = Ext.create('Ext.form.Panel', {
        fileUpload: true,
        autoHeight: true,
        bodyStyle: 'padding: 10px 10px 0 10px;',
        labelWidth: 50,
        method: 'POST',
        defaults: {
            anchor: '95%',
            allowBlank: false,
            msgTarget: 'side'
        }
    })
    if(fp.getForm().isValid()){
        fp.getForm().submit({
            url: Turtas.Properties.getServicePath()+'/save/' + record.data.resource,
            headers: {'Content-Type':'multipart/form-data; charset=UTF-8'},
        })
    }

},

And Spring controller:

@RequestMapping(value="turtas/save/gelezinkeliai", method=RequestMethod.POST)
    public @ResponseBody void saveGelezinkeliaiFromExcel(@RequestParam("file") MultipartFile file){
    System.out.println(file);
}

And error which I get:

Request processing failed; nested exception is org.springframework.web.multipart.MultipartException: Could not parse multipart servlet request; nested exception is java.io.IOException: org.apache.tomcat.util.http.fileupload.FileUploadException: the request was rejected because no multipart boundary was found

the request was rejected because no multipart boundary was found

I think the problem is in my client side request. I think my request doesn't attach the file I want to upload. I tried to set Headers in client side as undefined, but then content type becomes "application/json" and i get error that the request isn't multipart. So what's wrong with my code? I really hope someone will help me to figure out of this problem. Thanks in advance !

Update

Thanks @Lorenz Meyer for the answer but now i get different error:

java.lang.IllegalArgumentException: Your InputStream was neither an OLE2 stream, nor an OOXML stream

i changed my source code a bit.

 @RequestMapping(value="turtas/save/gelezinkeliai", method=RequestMethod.POST)
    public @ResponseBody void saveGelezinkeliaiFromExcel(@RequestParam("file") MultipartFile file){
    System.out.println(file.getContentType());
    System.out.println(file.getSize());
    System.out.println(file.getName());
    System.out.println(file.getOriginalFilename());
    System.out.println(file.isEmpty());
}

Output:

application/octet-stream
0
file

true

From client side i don't include parameters and from server side i request one parameter (file param), maybe that's the problem. Error says i choose bad format files, although i choose .xlsx or .xls, and the same error occurs.

Answer 1

The problem is that you create a new form in your upload function. Instead of submitting the form that contains your file upload button, you submit the new empty form.

First you have to make sure, your file upload button is inside a form. Then you have to submit that form.

In the change handler add fld on this line :

me.uploadFile(fld);

Set the URL as a property of the form and simplify uploadFile to:

uploadFile: function(fld){
    var form = fld.up('form').getForm()
    if(form.isValid()) form.submit()
}

Btw, record (in record.data.resource) is not defined and it seems your code is not complete or it would not work.