Question

forum member I am having some problems with the file upload in extjs 4 and JAVA.

I am using extjs4 and the upload form code is

{
                                    xtype: 'filefield',
                                    margin: '10 0 0 5',
                                    width: 296,
                                    fieldLabel: 'Image',
                                    emptyText: 'Select Company logo...',
                                    id: 'cmplogo',
                                    itemId: 'cmplogo',
                                    name: 'cmplogo',
                                    labelWidth: 70
                                },
                                {
                                    xtype: 'button',
                                    margin: '10 0 0 90',
                                    width: 89,
                                    text: 'Upload Image',
                                    action: 'btn-upload-img'
                                },

the button upload image has action:’btn-upload-img’ with function defined below

fileUpload: function(btn) {
        var win = btn.up('window');
        var form = win.down('form').getForm();
        alert('VALUE IS :'+form.getValues());

        if(form.isValid()){
            form.submit({
                url : 'company/UploadFile.action',
                waitMsg: 'Uploading your file...',
                success: function(fp, o) {
                    Ext.Msg.alert('Success', 'Your file has been uploaded.');
                }
            });
        }
    },

and my java controller has below function code

@RequestMapping(value = "/company/UploadFile.action")
    public @ResponseBody
    Map<String, ? extends Object> uploadFile(UploadItem uploadItem, BindingResult result) throws Exception {
        System.out.println("QUERY TO UPLOAD FILE");
        try {
            if(result.hasErrors()) {
                for(ObjectError error: result.getAllErrors()) {
                    System.err.println("Error: "+error.getCode()+" - "+error.getDefaultMessage());
                }
            }
            else
            {
                MultipartFile file = uploadItem.getFileData();
                String fileName = null;
                InputStream inputStream = null;
                OutputStream outputStream = null;
                if(file.getSize() > 0) {
                    inputStream = file.getInputStream();
                    if(file.getSize() > 10000) {
                        System.out.println("FILE SIZE:::"+file.getSize());
                    }
                    System.out.println("SIZE ::"+file.getSize());
                    fileName = "E:\\images\\"+file.getOriginalFilename();
                    outputStream = new FileOutputStream(fileName);
                    System.out.println("FILE NAME AND PATH IS ::"+fileName);
                    System.out.println("FILENNAME ::"+file.getOriginalFilename());

                    int readBytes = 0;
                    byte[] buffer = new byte[10000];
                    while((readBytes = inputStream.read(buffer, 0, 10000)) !=-1) {
                        outputStream.write(buffer, 0, readBytes);
                    }
                    outputStream.close();
                    inputStream.close();
                }
            }


        } catch (Exception e) {
            return getModelMapError("Error trying to read city");
        }
        return null;
    }

don’t know what’s wrong with my code above. my firebug console gives me below error

**uncaught exception: You're trying to decode an invalid JSON String: <pre>{"message":"Error trying to read city","success":false}</pre>**

please suggest me some solution I can try to get my error solved soon.

Answer 1

Your controller sending JSON data (application/json) as response which extjs not supports.
Try setting your response content type: “text/html” and it will work fine.
Change @ResponseBody to ResponseEntity

@RequestMapping(value = "/company/UploadFile.action")
public ResponseEntity<String> Map<String, ? extends Object> uploadFile(UploadItem uploadItem, BindingResult result) throws Exception {
    HttpHeaders responseHeaders = new HttpHeaders();
    responseHeaders.add("Content-Type", "text/html; charset=utf-8");

    // your controller logic goes here

    return new ResponseEntity<String>(response, responseHeaders, HttpStatus.OK);
}