CODEWITHSUNDEEP
javascriptjavajqueryspring-mvcdropzone.js
H hao
H hao

Reputation: 77

when I upload multiple files with dropzone.js, don't know how to receive parameter with spring mvc

When I use dropzone.js to upload many files, the problem is appearing.

I need add more parameter to POST request, I have read the documentation on dropzonejs.com and wiki on github.com, parameter is added to request.

The problem is that the default parameter of file is files[0],files[1] ...(I set the paramName option to files), but I can't receive files parameters with java spring mvc code.

This is my spring mvc controller code:

    @RequestMapping("/upload")
    public Map<String,Object> method(CaseInfo info,HttpServletRequest request,@RequestParam("files[]")MultipartFile[] files){
        ...
    }

This is my js core code:

this.on("sending", function(file, xhr, formData){
                    console.log("formData ->", formData);
                    var frm = $('#form');
                    var data = frm.serializeArray();
                    console.log('data ->', data);
                    for (var obj in data) {
                        formData.append(obj.name, obj.value);
                    }
                });

The controller just can't receive files parameter, and the name of others is undefined,

edited:

I changed the for-in to below, then the undefined problem solved. But I don't know why... somebody know?

for (var i = data.length - 1; i >= 0; i--) {
                        var obj = data[i];
                        formData.append(obj.name,obj.value);
                    }

Upvotes: 1

Views: 994

Answers (3)

user1156041
user1156041

Reputation: 2195

I found another way to solve this issue. I used wrapper class and add List of Multipart variable in this class. In the controller method, I catch with this wrapper class.

Something likes this.

@PostMapping("/upload")    
public String handleFileUpload(UploadFileRequestParam param) {

}

public class UploadFileRequestParam {
     // files should be in the form data
     private List<MultipartFile> files;
}

Upvotes: 0

Darth Jon
Darth Jon

Reputation: 423

Understood this is an old question but I've had some success changing the "sending" option to "sendingmultiple" then passing a function that simply returns "files" to match up with the spring controller signature:

js

    sendingmultiple: function(files, xhr, formData) {
        // additional request paramter
        formData.append('media', JSON.stringify(media));
        for (const [key, value] of formData) {
            console.log('key: ' + key + ' value: ' + value);
        }
    },
    acceptedFiles: "image/*",
    uploadMultiple: true,
    paramName: function() { return "files"; }

java

    @PostMapping("/user/media/upload")
    @ResponseStatus(HttpStatus.CREATED)
    public User uploadMedia(@RequestParam String media, @RequestParam("files") MultipartFile[] files) {

Upvotes: 1

H hao
H hao

Reputation: 77

I solved this problem by overwriting the source js code.

Dropzone.prototype._getParamName = function(n) {
            if (typeof this.options.paramName === "function") {
                return this.options.paramName(n);
            } else {
//                return "" + this.options.paramName + (this.options.uploadMultiple ? "[" + n + "]" : "");
                return "" + this.options.paramName;
            }
        };

Upvotes: 1

Related Questions