How to get the JSON reponse in drop zone ajax call

Question

Currently working on a dropzone functionality with the spring MVC framework.

This is the method in the controller class ( I'm using internal view resolver)

 @RequestMapping(value = "/save", method = RequestMethod.POST, produces = "application/json")
        @ResponseBody
        public String save(MultipartHttpServletRequest request,
                HttpServletResponse response, Model map) {
//The logic for adding file to db and creation of json object here
.....
.....

userDataJSON = strWriter.toString();
return userDataJSON;

}

Here is my javascript for the dropzone upload

Dropzone.options.myAwesomeDropzone = {          

        maxFilesize : 2,
        addRemoveLinks : true,          
        uploadMultiple : true,          
        init : function() {     
            this.on("addedfile", function(file) {                               
                $.ajax({
                method  : 'get'             
                }).done(function( data, textStatus, xhr ) {                 
                    alert(data);
                    //Expecting the json objec here

                });
            });  
        }
};

Here i'm not getting the json reponse, from the controller.

Please let me know if you have any solutions for me. Thanks in advance.

Absquatulate

more detail please... use console to check for errors and inspect ajax request – Retrieve

When we debugged and checked the logs, we saw the entire html page in the response, instead the json reponse from the controller. – Absquatulate

is url correct for request? No url property in your $.ajax seems strange unless you have a global setting – Retrieve

We have mentioned the url in the form, so when we drag and drop the files in the dragzone area, we should get the response from the controller save(you can see it in the above code). we have the save.html and if the controls finds the file save it will send the response. But in our case we are getting the html file in the response – Absquatulate

ok... regardless of what form says... and I am not familiar with whatever plugin you are using, $.ajax requires a url either set in a global setting or within each call. Assume answer is yes to request being made to correct url? – Retrieve

I'm using dropzonejs.com this plugin for the dropzone. – Absquatulate

well your ajax within on("addedFile")is very suspect. Sugegst you read plugin docs more thoroughly – Retrieve

For anyone else reading this that has more time than @Retrieve obviously did... the url parameter for a dropzone.js setup can be pulled in from the action attribute of the form element that is being converted to a drag/drop area. The ajax call above is fine. – Apodosis

Answer 1

I believe by default, dropzonejs is doing the ajax request to your file.

    $("#uploader").dropzone({ 
        url: "/upload.php",
        maxFilesize: 3,
        init: function() {
            this.on("success", function(file, response) {
                var obj = jQuery.parseJSON(response)
                console.log(obj);
            })
        }
    });

the url param is what is getting hit via the ajax call, and response (in the console.log) is what is coming back from /upload.php

Trellas

If your json is valid then you don't need parseJSON you can get direct data from it – Accusatorial

Answer 2

let uploadZone = new Dropzone(form, {});

uploadZone.on("success", function(file, res){ 
  res = JSON.parse(res); // if your response is a valid JSON, you don't need to use this line code
  console.log(res); 
});

you may catch your response data via event success. look code above to know

Raleigh