Upoad with MVC

[John]

Are there any examples of using the Kendo Upload async with ASP.NET MVC 3? I'm looking for a sample handler that I can use for the saveUrl property.

[T. Tsonev]

Hi John,

I've prepared a simple project that demonstrates how to do async upload in an MVC 3 project.

The save and remove handlers should return either:

• An empty response to signify success.
• Response containing JSON string with "text/plain" content encoding. The deserialized object can be accessed in the success event handler.
• Any other response to signify error.

We've added this important information to the documentation.

All the best,
Tsvetomir Tsonev
the Telerik team

[John]

Thanks! I'll have a look at it right away!

[Jaume Aguilo]

Hi Tsvetomir,
I've been working with FileUpload in a Spring Project. My controller returns a JSON response and I would like to work with this response in the success event handler.
I didn't see this behaivour in the example you attached. Your controllers always return an empty string.

Here's the method in my controller
@RequestMapping(value = "/{molsetid}/addSetProperties", method = RequestMethod.POST)
    public ResponseEntity<String> addSetPropertiesFromCSVFile(@PathVariable("molsetid") Integer molsetid, HttpServletRequest httpServletRequest,
            @RequestParam(value = "files", required = false) MultipartFile CSVMultipartFile) {

        HttpHeaders headers = new HttpHeaders();
        headers.add("Content-Type", "application/text; charset=utf-8");
        String realPath = httpServletRequest.getSession().getServletContext().getRealPath("/");
        try {
            File CSVFile = MoleculeSetService.saveFile(CSVMultipartFile, realPath);
            ArrayList<String> CSVheaders = new ArrayList<String>();
            Scanner lineScan;
            try {
                lineScan = new Scanner(CSVFile);
                Scanner s = new Scanner(lineScan.nextLine());
                s.useDelimiter(",");
                while (s.hasNext()) {
                    CSVheaders.add(s.next());
                }
                return new ResponseEntity<String>(new JSONSerializer().serialize(CSVheaders), headers, HttpStatus.OK);
            } catch (FileNotFoundException e) {
                e.printStackTrace();
                return new ResponseEntity<String>(e.getMessage(), headers, HttpStatus.METHOD_FAILURE);
            }
        } catch (RuntimeException e) {
            e.printStackTrace();
            return new ResponseEntity<String>(e.getMessage(), headers, HttpStatus.METHOD_FAILURE);
        }
    }

And here is the call in Javascript
$("#files").kendoUpload({
                    async: {
                        saveUrl: '${moleculeset_url}/${moleculeSet.id}/addSetProperties',
                        autoUpload: true,
                        multiple: false,
                    },
                    success: function (files, operation, response, XMLHttpRequest) {
                        alert(files);
                        alert(operation);
                        alert(response);
                        alert(XMLHttpRequest);
                    }
             });

files returns an Object and operation, response and XMLHttpRequest is undefined.

The response I see in firebug console is

["\"ord\"","\"card\"","\"alphabet\""]

Thanks in advance

[T. Tsonev]

Hello Jaume,

The documentation is not very clear, but the event handler accepts a single parameter - e. The de-serialized object is then available in the e.response field:

success: function (e) {
    var response = e.response;
}

Note that:

• The action should return the JSON with Content-Type set to "text/plain"
• The response code should be OK (200) otherwise the Upload will throw an error event

We'll update the documentation to make these requirements clear. 

Greetings,
Tsvetomir Tsonev
the Telerik team