Search code examples
jqueryhtmlspring-mvcjquery-upload-file-plugin

Spring tries to response with HTML page instead of JSON on file upload


I have Spring Controller for receiving file from browser (JQuery upload):

@RequestMapping(value = "upload", method = RequestMethod.POST)
@ResponseStatus(HttpStatus.OK)
public List<KnownIssueUiModel> upload(@RequestParam("files[]") MultipartFile file) throws IOException {
    List<KnownIssue> knownIssues = analysisService.analyze(DEFAULT_PROJECT, file.getInputStream());
    List<KnownIssueUiModel> issues = new ArrayList<>();
    for (KnownIssue knownIssue : knownIssues) {
        issues.add(new KnownIssueUiModel(knownIssue));
    }

    return issues;
}

In HTML page I Have:

$(function() {
    //  'use strict';
        // Change this to the location of your server-side upload handler:
        var url = 'services/upload';
        $('#fileupload').fileupload(
                {
                    url : url,
                    dataType : 'json',
                    done : function(e, data) {
                        console.info (data);

                        // Reset GUI
                        $( "#noresults" ).addClass('hide');  
                        for (var i=0;i<6;i++) {
                            $( "#panel" + i ).addClass('hide');  
                        }


                        // Add files
                        $.each(data.files, function(index, file) {
                            $( "#files" ).html( document.createTextNode( file.name +  '  (' + file.size + ')' ) );
                        });

                        // No results has been found
                        if (data.result.length>0 ){
                            dataResults = data.result;
                        } else {
                            $( "#noresults" ).removeClass('hide');  
                            //var dataResults = [{"name":"ATH is null (fake)","description":"DESC","jira":"GP-3486","workaround":"N/A"},{"name":"abcdef (fake)","description":"11111","jira":"SRW-1235","workaround":"N/A"}]                                
                        }

                        // Populate data
                        $.each(dataResults, function (index, entry) {
                              console.info (index);
                              $( "#name" + index ).html( document.createTextNode( "#" + (index+1) + " " + entry['name'] ) );
                              $( "#jira" + index ).html( document.createTextNode( entry['jira'] ) );
                              $( "#jira" + index ).prop("href", "https://jira.example.com/browse/" + entry['jira']);
                              $( "#description" + index ).html( entry['description'] );
                              $( "#workaround" + index ).html(  entry['workaround']  );
                              $( "#panel" + index ).removeClass('hide');  
                              //console.info (entry);
                        });                         
                    },
                    progressall : function(e, data) {
                        var progress = parseInt(data.loaded / data.total
                                * 100, 10);
                        $('#progress .progress-bar').css('width',
                                progress + '%');
                    }
                }).prop('disabled', !$.support.fileInput).parent()
                .addClass($.support.fileInput ? undefined : 'disabled');
    });

And input form:

<form class="row-fluid" id="dropper">
            <div class="text-center">
                <input id="fileInput" name="files[]" type="file" class="btn btn-file" autofocus required /> <input type="submit"
                    class="btn btn-success" />
            </div>
        </form>

But when I try to upload file, I can see in Chrome Dev Tools info:

HTTP ERROR 404

Problem accessing /WEB-INF/view/upload.html. Reason:

    Not Found

Why Spring tries to return html page instead of JSON with list of issues?

EDIT: I have @RequestMapping("/services") annotation over Controller class, so it's not the fault of bad request address.


Solution

  • Actually you have missed @ResponseBody annotation from spring MVC API. This enables response in JSON format. Please make following change in your controller method:

     @RequestMapping(value = "upload", method = RequestMethod.POST)
     @ResponseStatus(HttpStatus.OK)
     public  @ResponseBody List<KnownIssueUiModel> upload(@RequestParam("files[]") MultipartFile     file) throws IOException {
    

    alternatively you can use this annotation for overall method as well like below:

     @RequestMapping(value = "upload", method = RequestMethod.POST)
     @ResponseStatus(HttpStatus.OK)
     @ResponseBody
     public List<KnownIssueUiModel> upload(@RequestParam("files[]") MultipartFile     file) throws IOException {